是否可以<input type='file' />使用jQuery 清除控件值?我尝试了以下方法:
<input type='file' />
$('#control').attr({ value: '' });
但这不起作用。
简易:<form>将元素包裹起来,在表单上调用reset,然后使用删除表单.unwrap()。与.clone()该线程中不同的解决方案不同,你最终得到的是同一元素(包括在其上设置的自定义属性)。
<form>
.unwrap()
.clone()
经过测试并可以在Opera,Firefox,Safari,Chrome和IE6 +中运行。也适用于其他类型的表单元素,但除外type="hidden"。
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>触发提交。
.preventDefault()
<button>
编辑 由于未修复的错误,因此无法在IE 11中运行。文本(文件名)在输入中被清除,但其File列表仍被填充。
File
快速解答:更换它。
在下面的代码中,我使用replaceWithjQuery方法将控件替换为其自身的副本。如果你有任何绑定到此控件上事件的处理程序,我们也要保留这些处理程序。为此,我们将其true作为方法的第一个参数传入clone。
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。