How to fire an event on file select using jQuery ? Last Updated : 17 Sep, 2019 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. html <!DOCTYPE html> <html> <head> <title> How to fire event on file select in jQuery? </title> <script src= "https://code.jquery.com/jquery-1.12.4.min.js"> </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> Output: Example 2: The change() method is used to fire an event when file is selected. html <!DOCTYPE html> <html> <head> <title> How to fire event on file select in jQuery? </title> <script src= "https://code.jquery.com/jquery-1.12.4.min.js"> </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> Output: Comment More infoAdvertise with us Next Article How to fire an event on file select using jQuery ? S SHUBHAMSINGH10 Follow Improve Article Tags : Web Technologies JQuery Similar Reads How to create a File Input using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a File Input Area using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†hr 1 min read How to run the code on change event using jQuery ? In this article, we will see how to run the code on change events using jQuery. The change event is used to trigger when the user changes the value of the element. Syntax: $(selector).change(function) Example: In the below example, we are creating a textarea element that contains GeeksforGeeks text. 1 min read How to load external HTML file using jQuery ? In this article, we will learn how to load an external HTML file into a div element. The following jQuery functions are used in the example codes. ready(): The ready event occurs when the DOM (document object model) has been loaded.load(): The load() method loads data from a server and gets the retu 3 min read How to get file input by selected file name without path using jQuery ? To get the selected file name without the path using jQuery, use the HTML <input type="file"> element. Upon file selection, the jQuery change() method captures the event, and the file name is retrieved using the name property of the event target's files.Syntax:$(selector).change(function(e){}) 2 min read How to trigger click on select box on hover using jQuery ? In this article, we are going to learn, how we can trigger a click event on the select box or drop-down menu while hovering the mouse using jQuery.For creating such behavior for a select box, we will use the jQuery attr() method. This method is used to set or return the attributes and values of the 2 min read Like