How to reset file input with jQuery


You need to reset file input element (<input type="file">) in a complex form without affecting other elements.


  • Wrap a new <form> element around <input type="file"> element using wrap() method
  • Reset newly added <form> element with our file upload control using reset() method
  • Remove newly added <form> element from the DOM using unwrap() method

The benefit of this method is that it preserves the original <input type="file"> element and therefore allows to retain existing event handlers attached to it.


$('#btn-example-file-reset').on('click', function(e){
   var $el = $('#example-file');

Edit on jsFiddle

You Might Also Like


Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.

This site uses Akismet to reduce spam. Learn how your comment data is processed.