Problem
You need to reset file input element (<input type="file">) in a complex form without affecting other elements.
Solution
Set element’s value to empty string, for example $('#example-file').val('').
Alternative solution for older browsers
- 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.
i would like to reset the input field once the file is uploaded. is there any solution?
Thanks!
Use simple:
$('#btn-example-file-reset').on('click', function(e){ $('#example-file').val(""); });Thank you for your comment. Your suggestion is cleaner and seems to work in the latest browsers, although I haven’t tested all possible use cases. I have updated the article.
Nice Post !
It helps me a lot in my current project . Thanks for posting useful information.
Thanks
Multiple files select. and remove any one image then?
I like the solution, but what if I want the file name to remain even when I update cookies in my program?