In this article, we will learn how to rest input type=”file” using Javascript/Jquery. We can easily reset a file using jQuery and HTML. This can also be done using Javascript and HTML.
Approach: Using wrap method in jquery: The best way to reset input type=file is by resetting the whole form. Wrap <input type = “file”> into <form> tags and reset the form:
Example 1: In this example, we will see the use wrap method.
HTML
<!DOCTYPE html><html><head> <script src= </script> <!-- jQuery code to show the working of this method --> <script> $(document).ready(function () { $('#resetbtn').on('click', function (e) { let $el = $('#infileid'); $el.wrap('<form>').closest( 'form').get(0).reset(); $el.unwrap(); }); }); </script></head><body> <h2 style="color:green">neveropen</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></body></html> |
Output:
How to reset input type = “file” using JavaScript/jQuery?
Approach: Using file.value = ”: The simplest way to reset the input is to change the filled value with nothing. This method works in every browser.
Example 2: In this example, we will see the use file.value = ‘ ‘
HTML
<!DOCTYPE html><html><head> <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> <h2 style="color:green"> neveropen </h2> <input type="file" class="file" /> <br> <button onclick="resetFile()"> Reset file </button></body></html> |
Output:
How to reset input type = “file” using JavaScript/jQuery?
Approach: Using wrap method in jquery: Wrap <input type = “file”> in to <form> tags and reset the form:
Example 3: In this example, we will see the use of wrap method in jquery.
HTML
<!DOCTYPE html><html><body> <h2 style="color:green"> neveropen </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></body></html> |
Output:
How to reset input type = “file” using JavaScript/jQuery?
