Skip to content
Related Articles

Related Articles

How to reset input type = “file” using JavaScript/jQuery?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 18 Feb, 2022

Jquery: 
 

  • Using wrap method in jquery: 
    The best way to reset input type=file is resetting the whole form. Wrap <input type = “file”> into <form> tags and reset the form: 
    Example-1: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>reset input type = “file”</title>
    <script src=
    </script>
 
    <!-- jQuery code to show the
         working of this method -->
    <script>
        $(document).ready(function() {
            $('#resetbtn').on('click', function(e) {
                var $el = $('#infileid');
                $el.wrap('<form>').closest(
                  'form').get(0).reset();
                $el.unwrap();
            });
        });
    </script>
</head>
 
<body>
    <center>
        <h2 style="color:green">GeeksforGeeks</h2>
        <form id="find" name="formname">
            <p>
                <label>File</label>
                <input id="infileid" type="file">
            </p>
            <p>
                <button id="resetbtn"
                        type="button">
                  Reset file
              </button>
            </p>
        </form>
    </center>
</body>
 
</html>

  • Output: 
    Before: 
     

  • After: 
     

  •  
  • Using file.value = ”: 
    The simplest way to reset the input is changing the filled value with nothing. this method is workes in every browser. 
    Example-2: 
     

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        reset input type = “file”
    </title>
    <script src=
    </script>
 
    <!-- jQuery code to show the
         working of this method -->
    <script>
        function resetFile() {
            const file =
                document.querySelector('.file');
            file.value = '';
        }
    </script>
</head>
 
<body>
    <center>
        <h2 style="color:green">
    GeeksforGeeks
  </h2>
        <input type="file" class="file" />
        <button onclick="resetFile()">
            Reset file
        </button>
    </center>
</body>
 
</html>

  • Output: 
    Before: 
     

  • After: 
     

  •  
  • Using wrap method in jquery: 
    Wrap <input type = “file”> in to <form> tags and reset the form: 
    Example-3: 
     

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
      reset input type = “file”
  </title>
 
</head>
 
<body>
    <center>
        <h2 style="color:green">
          GeeksforGeeks
      </h2>
        <form id="find"
              name="formname">
            <p>
                <label>File</label>
                <input type="file">
            </p>
            <p>
                <button id="resetbtn"
                        type="button"
                        onClick="this.form.reset()">
                  Reset file
              </button>
            </p>
        </form>
    </center>
</body>
 
</html>

  • Output: 
    Before: 
     

  • After: 
     

  •  

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!