How to fire an event on file select using jQuery ?
Given an HTML document and the task to fire an event when a file is selected using jQuery. The JQuery change() method is used to fire an event when file is selected.
Using change() method: It is used to change the value of the input fields. This method works with “input, textarea and select” elements.
Syntax:
$(selector).change(function)
Example 1: The change() method is used to fire an event when file is selected.
<!DOCTYPE html> <html> <head> <title> How to fire event on file select in jQuery? </title> <script src= </script> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <h3> How to fire event on file select in jQuery? </h3> <p>Click on button to select the file</p> <input type="file" id="Geeks" value="Click"> <script> $(document).ready(function() { $('input[type="file"]').change(function() { alert("A file has been selected."); }); }); </script> </body> </html> |
chevron_right
filter_none
Output:
Example 2: The change() method is used to fire an event when file is selected.
<!DOCTYPE html> <html> <head> <title> How to fire event on file select in jQuery? </title> <script src= </script> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <h3>How to fire event on file select in jQuery?</h3> <p>Click on button to select the file</p> <input type="file" id="Geeks" value="Click"> <h4></h4> <script> $(document).ready(function(){ $('input[type="file"]').change(function(){ $("h4").text("File is added!"); }); }); </script> </body> </html> |
chevron_right
filter_none
Output:
