我想清除表单中的文件输入。
我知道将源设置为相同的方法......但该方法不会删除选定的文件路径。
注意：我想避免重新加载页面、重置表单或执行 AJAX 调用。
这可能吗？
如何使用 JavaScript 清除 HTML 文件输入？
IT技术
javascript
html
input-type-file
2021-01-16 06:16:50
6个回答
有 3 种方法可以使用 javascript 清除文件输入：
将 value 属性设置为空或 null。
适用于 IE11+ 和其他现代浏览器。
创建一个新的文件输入元素并替换旧元素。
缺点是您将丢失事件侦听器和 expando 属性。
通过 form.reset() 方法重置所有者表单。
为了避免影响同一所有者表单中的其他输入元素，我们可以创建一个新的空表单并将文件输入元素附加到这个新表单并重置它。这种方式适用于所有浏览器。
我写了一个javascript函数。演示： http : //jsbin.com/muhipoye/1/
function clearInputFile(f){
if(f.value){
try{
f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
}catch(err){ }
if(f.value){ //for IE5 ~ IE10
var form = document.createElement('form'),
parentNode = f.parentNode, ref = f.nextSibling;
form.appendChild(f);
form.reset();
parentNode.insertBefore(f,ref);
}
}
}
tl;dr：对于现代浏览器，只需使用
input.value = '';
旧答案：
怎么样：
input.type = "text";
input.type = "file";
我还是要明白为什么这并不能一起工作的WebKit。
无论如何，这适用于 IE9>、Firefox 和 Opera。
webkit 的情况是我似乎无法将其改回文件。
对于 IE8，情况是它会引发安全异常。
编辑： 对于 webkit、Opera 和 firefox，这有效，但：
input.value = '';
（用这个建议检查上面的答案）
我会看看我是否能找到一种更简洁的方式来在不需要 GC 的情况下执行此跨浏览器。
编辑2：
try{
inputs[i].value = '';
if(inputs[i].value){
inputs[i].type = "text";
inputs[i].type = "file";
}
}catch(e){}
适用于大多数浏览器。不适用于 IE < 9，仅此而已。
在 firefox 20、chrome 24、opera 12、IE7、IE8、IE9 和 IE10 上测试。
将该值设置为''不适用于所有浏览器。
而是尝试将值设置为null如下所示：
document.getElementById('your_input_id').value= null;
编辑：我得到了不允许 JS 设置文件输入的非常有效的安全原因，但是提供一个简单的机制来清除已经选择的输出似乎是合理的。我尝试使用空字符串，但它并不适用于所有浏览器，适用NULL于我尝试过的所有浏览器（Opera、Chrome、FF、IE11+ 和 Safari）。
编辑：请注意，设置为NULL适用于所有浏览器，而设置为空字符串则无效。
不幸的是，上述答案似乎都没有涵盖所有基础 - 至少在我使用 vanilla javascript 的测试中没有。
.value = null似乎适用于 FireFox、Chome、Opera 和 IE11（但不适用于IE8/9/10）.cloneNode（.clone()在 jQuery 中）在 FireFox 上似乎复制.value过来，因此使克隆毫无意义。
所以这是我编写的适用于 FireFox（27 和 28）、Chrome（33）、IE（8、9、10、11）、Opera（17）的 vanilla javascript 函数……这些是目前唯一可用的浏览器给我测试。
function clearFileInput(ctrl) {
try {
ctrl.value = null;
} catch(ex) { }
if (ctrl.value) {
ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
}
}
该ctrl参数是文件输入本身，所以该函数将被称为...
clearFileInput(document.getElementById("myFileInput"));
解决方案
以下代码适用于 jQuery。它适用于所有浏览器并允许保留事件和自定义属性。
var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();
演示
有关代码和演示，请参阅此 jsFiddle。