jquery清空file内容_javascript - 使用jQuery清除<input type ='file'/>

Jquery应该为您处理跨浏览器/旧浏览器问题。

这适用于我测试的现代浏览器：Chromium v25，Firefox v20，Opera v12.14

使用jquery 1.9.1

HTML

Clear

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方法的vanilla等价物。

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

您无法直接从元素本身获取附加的事件处理程序。

这是vanilla 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和其他库都有维护这样一个列表所需的所有其他支持方法，这只是一个演示。