且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

清除<输入类型='文件'/>使用 jQuery

更新时间:2022-11-30 10:40:18

简单:你在元素周围包裹一个

,在表单上调用 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() on防止 <button> 触发提交的事件.

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.