清除 <input type='file'/>使用 jQuery

问题描述：

是否可以使用 jQuery 清除控件值?我尝试了以下方法:

Is it possible to clear an <input type='file' /> control value with jQuery? I've tried the following:

$('#control').attr({ value: '' });

但它不起作用.

答

简单:将

包裹在元素周围，在表单上调用 reset，然后使用 .unwrap().与此线程中其他的 .clone() 解决方案不同，您最终会得到相同的元素(包括在其上设置的自定义属性).

Easy: you wrap a <form> around the element, call reset on the form, then remove the form using .unwrap(). Unlike the .clone() solutions otherwise in this thread, you end up with the same element at the end (including custom properties that were set on it).

在 Opera、Firefox、Safari、Chrome 和 IE6+ 中测试和工作.也适用于其他类型的表单元素，type="hidden" 除外.

Tested and working in Opera, Firefox, Safari, Chrome and IE6+. Also works on other types of form elements, with the exception of type="hidden".

window.reset = function(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input id="file" type="file">
  <br>
  <input id="text" type="text" value="Original">
</form>

<button onclick="reset($('#file'))">Reset file</button>
<button onclick="reset($('#text'))">Reset text</button>

JSFiddle

正如 Timo 在下面指出的，如果您有按钮触发

内的字段重置，则必须调用 .preventDefault()防止触发提交的事件.

As Timo notes below, if you have the buttons to trigger the reset of the field inside of the <form>, you must call .preventDefault() on the event to prevent the <button> from triggering a submit.

由于未修复的错误，在 IE 11 中不起作用.输入中的文本(文件名)被清除，但其 File 列表仍然填充.

Does not work in IE 11 due to an unfixed bug. The text (file name) is cleared on the input, but its File list remains populated.

清除 <input type='file'/>使用 jQuery

相关推荐