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:
.png)