Skip to content
Related Articles

Related Articles

Improve Article
How to reset input type = “file” using JavaScript/jQuery?
  • Last Updated : 14 May, 2019

Jquery:

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




    <!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="fid" 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:




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

    JavaScript:

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




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
          reset input type = “file”
      </title>
      
    </head>
      
    <body>
        <center>
            <h2 style="color:green">
              GeeksforGeeks
          </h2>
            <form id="fid" 
                  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 :