Related Articles

Related Articles

How to fire an event on file select using jQuery ?
  • Last Updated : 17 Sep, 2019

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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


Output:

Example 2: The change() method is used to fire an event when file is selected.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :