是否有可能清除<input type='file' />控件值与jQuery?我试过以下几种方法:
$('#control').attr({ value: '' });
但这并不奏效。
是否有可能清除<input type='file' />控件值与jQuery?我试过以下几种方法:
$('#control').attr({ value: '' });
但这并不奏效。
当前回答
这很简单lol(适用于所有浏览器[除了opera]):
$('input[type=file]').each(function(){
$(this).after($(this).clone(true)).remove();
});
JS Fiddle: http://jsfiddle.net/cw84x/1/
其他回答
这适用于Chrome, FF和Safari
$("#control").val("")
可能无法与IE或Opera工作
出于明显的安全原因,您不能设置文件输入的值,甚至是空字符串。
你所要做的就是重置字段所在的表单,或者如果你只想重置包含其他字段的表单的文件输入,使用这个:
function reset_field (e) {
e.wrap('<form>').parent('form').trigger('reset');
e.unwrap();
}
这里有一个例子:http://jsfiddle.net/v2SZJ/1/
什么? 在验证函数中
document.onlyform.upload.value="";
假设upload是名称:
<input type="file" name="upload" id="csv_doc"/>
我使用JSP,不确定这是否有区别…
对我来说是可行的,而且我觉得这样简单多了。
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
I have no way to test with IE, but theoretically this should work. If IE is different enough that the Javascript version does not work because MS have done it in a different way, the jquery method should in my opinion deal with it for you, else it would be worth pointing it out to the jquery team along with the method that IE requires. (I see people saying "this won't work on IE", but no vanilla javascript to show how it does work on IE (supposedly a "security feature"?), perhaps report it as a bug to MS too (if they would count it as such), so that it gets fixed in any newer release)
就像在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);
据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。克隆提供[*1]
$("#fileopen").change(function () {
alert("change");
});
$("#clear").click(function () {
var fileopen = $("#fileopen"),
clone = fileopen.clone(true);
fileopen.replaceWith(clone);
});
据jsfiddle
[*1]如果事件是由jquery的方法添加的,jquery能够做到这一点,因为它在jquery中保留了一个副本。数据,否则它不能工作,所以这是一种欺骗/变通,意味着不同方法或库之间不兼容。
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和其他库有维护这样一个列表所需的所有其他支持方法,这只是一个演示。
我被这里的选项困住了。下面是我做的一个有效的方法:
<form>
<input type="file">
<button type="reset" id="file_reset" style="display:none">
</form>
你可以使用jQuery来触发重置,代码如下:
$('#file_reset').trigger('click');
(JSFIDDLE: http://jsfiddle.net/eCbd6/)