How to reset file input with jQuery

Solution

The solution is to wrap the control in a new <form> element, use reset() method to reset the form with our file control and then remove the form using unwrap().

Compared to other solutions available that suggest using clone() this method preserves the original <input type="file"> element. It allows to retain event handlers assigned to this element.

Demo



Edit on jsFiddle

$('#btn-example-file-reset').on('click', function(e){
   var $el = $('#example-file');
   $el.wrap('<form>').closest('form').get(0).reset();
   $el.unwrap();
});

Related posts

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.
(Optional)