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

Question

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

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

注意:我希望避免重新加载页面、重置表单或执行 AJAX 调用。

这可能吗？

Answer 1

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

1. 将 value 属性设置为空或 null。

   适用于 IE11+ 和其他现代浏览器。

2. 创建一个新的文件输入元素并替换旧的。

   缺点是您将失去事件监听器和 expando 属性。

3. 通过 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);
        }
    }
}