使用jQuery清除<input type ='file'/>
是否有可能通过jQuery清除<input type='file' />控制值？ 我试过以下内容：
$('#control').attr({ value: '' });
但它不起作用。
简单：在元素周围包装<form> ，在窗体上调用reset，然后使用unwrap（）删除窗体。 与此线程中的clone（）解决方案不同的是，最终会得到相同的元素（包括设置的自定义属性）。
经过测试并在Opera，Firefox，Safari，Chrome和IE6 +上工作。 也适用于其他类型的表单元素，但type="hidden"除外。
http://jsfiddle.net/rPaZQ/
function resetFormElement(e) {
e.wrap('<form>').closest('form').get(0).reset();
e.unwrap();
// Prevent form submission
e.stopPropagation();
e.preventDefault();
}
正如Timo在下面所述，如果您有按钮来触发重置<form>中的字段，则必须在事件上调用preventDefault以防止<button>触发提交。
编辑
由于未修复的错误，在IE 11中不起作用。 文本（文件名称）在输入上被清除，但其File列表仍然填充。
快速回答：替换它。
在下面的代码中，我使用replaceWith jQuery方法用自身的克隆替换控件。 如果您有任何处理程序绑定到此控件上的事件，我们也希望保留这些控件。 为此，我们传入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 ) );
});
小提琴：http://jsfiddle.net/jonathansampson/dAQVM/
如果克隆，同时保留事件处理程序，则会出现任何问题，您可以考虑使用事件委派处理父元素对此控件的单击操作：
$("form").on("focus", "#control", doStuff);
这可以防止在刷新控件时需要将任何处理程序与元素一起克隆。
jquery应该为您处理跨浏览器/较旧的浏览器问题。
这适用于我测试的现代浏览器：Chromium v25，Firefox v20，Opera v12.14
使用jQuery 1.9.1
HTML
<input id="fileopen" type="file" value="" />
<button id="clear">Clear</button>
jQuery的
$("#clear").click(function () {
$("#fileopen").val("");
});
在jsfiddle上
以下JavaScript解决方案也适用于上面提到的浏览器。
document.getElementById("clear").addEventListener("click", function () {
document.getElementById("fileopen").value = "";
}, false);
在jsfiddle上
我无法用IE测试，但理论上这应该起作用。 如果IE浏览器不同，JavaScript版本不能正常工作，因为MS已经以不同的方式完成了，jquery方法在我看来应该为你处理，否则值得一提的是jquery团队以及IE需要的方法。 （我看到人们说“这不适用于IE浏览器”，但没有香草JavaScript来显示它如何在IE上工作（据说是一个“安全功能”？），也许把它作为一个错误报告给MS（如果他们会按此计算），以便在任何新版本中得到修复）
就像在另一个答案中提到的，在jQuery论坛上的一篇文章
if ($.browser.msie) {
$('#file').replaceWith($('#file').clone());
} else {
$('#file').val('');
}
但jquery现在已经取消了对浏览器测试的支持，jquery.browser。
这个javascript解决方案也适用于我，它是jquery.replaceWith方法的香草等价物。
document.getElementById("clear").addEventListener("click", function () {
var fileopen = document.getElementById("fileopen"),
clone = fileopen.cloneNode(true);
fileopen.parentNode.replaceChild(clone, fileopen);
}, false);
在jsfiddle上
重要的是要注意，cloneNode方法不保留相关的事件处理程序。
看到这个例子。
document.getElementById("fileopen").addEventListener("change", function () {
alert("change");
}, false);
document.getElementById("clear").addEventListener("click", function () {
var fileopen = document.getElementById("fileopen"),
clone = fileopen.cloneNode(true);
fileopen.parentNode.replaceChild(clone, fileopen);
}, false);
在jsfiddle上
但jquery.clone提供了这个[* 1]
$("#fileopen").change(function () {
alert("change");
});
$("#clear").click(function () {
var fileopen = $("#fileopen"),
clone = fileopen.clone(true);
fileopen.replaceWith(clone);
});
在jsfiddle上
[* 1] jquery能够做到这一点，如果事件是由jquery的方法添加的，因为它保留了jquery.data中的副本，否则它不起作用，所以这是一个作弊/变通办法，并且意味着事情不是兼容不同的方法或库。
document.getElementById("fileopen").addEventListener("change", function () {
alert("change");
}, false);
$("#clear").click(function () {
var fileopen = $("#fileopen"),
clone = fileopen.clone(true);
fileopen.replaceWith(clone);
});
在jsfiddle上
您无法直接从元素本身获取附加的事件处理程序。
这里是香草JavaScript的一般原则，这是jQuery和其他所有图书馆如何做的（大致）。
(function () {
var listeners = [];
function getListeners(node) {
var length = listeners.length,
i = 0,
result = [],
listener;
while (i < length) {
listener = listeners[i];
if (listener.node === node) {
result.push(listener);
}
i += 1;
}
return result;
}
function addEventListener(node, type, handler) {
listeners.push({
"node": node,
"type": type,
"handler": handler
});
node.addEventListener(type, handler, false);
}
function cloneNode(node, deep, withEvents) {
var clone = node.cloneNode(deep),
attached,
length,
evt,
i = 0;
if (withEvents) {
attached = getListeners(node);
if (attached) {
length = attached.length;
while (i < length) {
evt = attached[i];
addEventListener(clone, evt.type, evt.handler);
i += 1;
}
}
}
return clone;
}
addEventListener(document.getElementById("fileopen"), "change", function () {
alert("change");
});
addEventListener(document.getElementById("clear"), "click", function () {
var fileopen = document.getElementById("fileopen"),
clone = cloneNode(fileopen, true, true);
fileopen.parentNode.replaceChild(clone, fileopen);
});
}());
在jsfiddle上
当然，jquery和其他库有维护这样一个列表所需的所有其他支持方法，这只是一个示例。
链接地址: http://www.djcxy.com/p/48723.html