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 > |
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 > |
Output:
Please Login to comment...