How to get selected file name from Input Type File using jQuery
In this tutorial, we are going to see how to get selected file name from Input Type File using jQuery. You can simply use jQuery’s change() method to get the filename selected by the HTML form input .
HTML Code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>How to get selected file name from Input Type File</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> // Put the jQuery code Here </script> </head> <body> <input type="file"> </body> </html>
jQuery Code:
$(document).ready(function() { $('input[type="file"]').change(function(e) { var file = e.target.files[0].name; alert('The file "' + file + '" has been selected.'); }); });
Result |
---|