一尘不染

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

spring

是否可以<input type='file' />使用jQuery 清除控件值?我尝试了以下方法:

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

但这不起作用。


阅读 1228

收藏
2020-04-25

共2个答案

一尘不染

简易:<form>将元素包裹起来,在表单上调用reset,然后使用删除表单.unwrap()。与.clone()该线程中不同的解决方案不同,你最终得到的是同一元素(包括在其上设置的自定义属性)。

经过测试并可以在Opera,Firefox,Safari,Chrome和IE6 +中运行。也适用于其他类型的表单元素,但除外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所述,如果你有按钮来触发重置内部的字段,则<form>必须调用.preventDefault()该事件以防止<button>触发提交。

编辑
由于未修复的错误,因此无法在IE 11中运行。文本(文件名)在输入中被清除,但其File列表仍被填充。

2020-04-25
一尘不染

快速解答:更换它。

在下面的代码中,我使用replaceWithjQuery方法将控件替换为其自身的副本。如果你有任何绑定到此控件上事件的处理程序,我们也要保留这些处理程序。为此,我们将其true作为方法的第一个参数传入clone

<input type="file" id="control"/>
<button id="clear">Clear</button>
var control = $("#control");

$("#clear").on("click", function () {
    control.replaceWith( control = control.clone( true ) );
});

如果clone在保留事件处理程序的同时出现任何问题,你可以考虑使用事件委托来处理父元素对此控件的单击:

$("form").on("focus", "#control", doStuff);

这样可以避免在刷新控件时将任何处理程序与元素一起clone。

2020-04-25