jquery清空file内容_使用jQuery清除<inputtype=‘file’/>

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

这在我测试过的现代浏览器上工作：Chrome V 25，Firefox v20，Opera v12.14

使用jQuery 1.9.1

HTMLClear

jQuery$("#clear").click(function () {

$("#fileopen").val("");});

在……上面小提琴

下面的javascript解决方案也适用于上面提到的浏览器。document.getElementById("clear").addEventListener("click", function () {

document.getElementById("fileopen").value = "";}, false);

在……上面小提琴

我没有办法用IE进行测试，但理论上这应该是可行的。如果IE是不同的，因为MS以不同的方式完成了它，所以Javascript版本无法工作，那么jQuery方法在我看来应该为您处理，否则就值得向jQuery团队和IE所需的方法一起指出。(我看到有人说“这在IE上行不通”，但没有普通的javascript来展示它在IE上的工作方式(据说是一个“安全特性”？)，也许也会把它作为一个bug报告给MS(如果他们把它算在内的话)，以便在任何较新的版本中修复它)。

就像在另一个答案中提到的，在jQuery论坛if ($.browser.msie) {

$('#file').replaceWith($('#file').clone());

} else {

$('#file').val('');

}

但是jQuery现在已经取消了对浏览器测试的支持，浏览器。

这个javascript解决方案也适用于我，它是与jquery.replaceWith方法。document.getElementById("clear").addEventListener("click", function () {

var fileopen = document.getElementById("fileopen"),

clone = fileopen.cloneNode(true);

fileopen.parentNode.replaceChild(clone, fileopen);}, false);

在……上面小提琴

重要的是要注意的是克隆节点方法不保留关联的事件处理程序。

看这个例子。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);

在……上面小提琴

但克隆人提供这个[*1]$("#fileopen").change(function () {

alert("change");});$("#clear").click(function () {

var fileopen = $("#fileopen"),

clone = fileopen.clone(true);

fileopen.replaceWith(clone);});

在……上面小提琴

[*1]如果事件是由jQuery的方法添加的，那么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);});

在……上面小提琴

不能直接从元素本身获取附加的事件处理程序。

这里是vanillajavascript中的一般原则，jQuery所有其他库都是这样做的(大致如此)。(function () {

var listeners = [];

function getListeners(node) {

var length = listeners.length,

i = 0,

result = [],

listener;

while (i 

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 

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);

});}());

在……上面小提琴

当然，jQuery和其他库拥有维护这样一个列表所需的所有其他支持方法，这只是一个演示。