How Can I Clear a File Input Control's Value Using jQuery?

Clearing File Input Control with jQuery

The question arises: is it feasible to reset the value of an HTML file input control (

To address this issue, a unique solution emerges. The file input control is wrapped within a form element. Subsequently, the reset method is invoked on the form, effectively clearing the input values. Finally, the form is removed using the unwrap() function.

Crucially, this technique leaves the original file input control intact, preserving any custom properties or attributes. Tests have confirmed its compatibility with a range of browsers, including Opera, Firefox, Safari, Chrome, and IE6 .

For added versatility, this approach can be applied to other form elements as well. However, hidden input fields remain an exception.

Below is a code snippet that showcases how to implement this solution:

window.reset = function(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
};</p>
<pre class="brush:php;toolbar:false"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input>

The above is the detailed content of How Can I Clear a File Input Control's Value Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!