How to reset input type = “file” using JavaScript/jQuery?
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: