Here you can learn how to add client side validation on Browse/Upload button. JQuery helps a lot to add such type of client side validation on HTML DOM.
You can create form like below:
|
1 2 3 4 |
<form method="post" enctype="multipart/form-data" > <input id="browse_button" name="file" type="file"> <input type="submit" id="upload_file_btn" name="Submit" value="Upload File" /> </form> |
Now you have to add following jQuery code inside <head> tag.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> jQuery('document').ready(function(){ jQuery('#upload_file_btn').click(function(){ var browseButtonVal=jQuery('#browse_button').val().length; if(browseButtonVal<=0){ // Write code for what happen if file is not selected alert("Please upload file"); return false; }else{ // Write code for what happen if file is selected return true; } }); }); </script> |
Note: You have to make sure that jQuery core file is included in your <head> tag like below:
|
1 2 3 4 |
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> |
I am software developer by profession and doing work and research in field of Computer programmings like PHP, WordPress, Magento, jQuery, Google APIs and many more web languages. Apart from this I write blogs on programming languages like PHP, Javascript, WordPress etc. I am also individual and independent Freelancer so you can hire me for your web work.