如何使用 JavaScript 清除 HTML 文件输入？

javascript html input-type-file

2022-08-30 00:27:56

我想清除表单中的文件输入。

我知道如何将源设置为相同的方法...但该方法不会删除选定的文件路径。

注意：我想避免重新加载页面，重置表单或执行AJAX调用。

这可能吗？

答案 1

有3种方法可以使用javascript清除文件输入：

将值属性设置为空或空。

适用于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);
        }
    }
}

答案 2

tl;dr：对于现代浏览器，只需使用

input.value = ''或input.value = null;

旧答案：

怎么样：

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 上进行了测试。