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

EN

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

1. set值属性设置为空或null。

适用于IE11+和其他现代的browsers.

• Create，一个新的文件输入元素，并取代旧的。

缺点是您将丢失事件侦听器，并通过form.reset()方法扩展properties.

• 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>，火狐和Opera。

webkit的情况是，我似乎无法将其改回文件。

对于IE8，情况是它抛出了一个安全异常。

编辑:适用于webkit、Opera和Firefox.js的

input.value = '';

(请将上述答案与此建议进行核对)

我将看看是否可以找到一种更好、更干净的方式来完成跨浏览器的工作，而不需要GC。

Edit2:

try{
    inputs[i].value = '';
    if(inputs[i].value){
        inputs[i].type = "text";
        inputs[i].type = "file";
    }
}catch(e){}

适用于大多数浏览器。不适用于IE < 9，仅此而已。

在火狐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在所有浏览器上都有效，而设置为空字符串则不能。