将该值设置为“并不适用于所有浏览器。

相反，尝试将值设置为null，如下所示:

document.getElementById('your_input_id').value= null;

编辑: 我得到了不允许JS设置文件输入的非常有效的安全原因，但是提供一个简单的机制来清除已经选择的输出似乎是合理的。我尝试使用空字符串，但它在所有浏览器中都不起作用，NULL在我尝试过的所有浏览器中都起作用(Opera, Chrome, FF, IE11+和Safari)。

编辑: 请注意，设置为NULL在所有浏览器上都有效，而设置为空字符串则不行。

试试这个简单的方法，它会奏效的

let input = elem.querySelector('input[type="file"]');
input.outerHTML=input.outerHTML;

这将重置输入

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

将value property设置为空或空。 适用于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:对于现代浏览器，使用即可

输入。Value = "或输入。Value = null;

旧的回答:

如何:

input.type = "text";
input.type = "file";

我仍然要理解为什么这不能与webkit工作。

无论如何，这适用于IE9>， Firefox和Opera。 webkit的情况是，我似乎无法将其更改回文件。 在IE8中，情况是它抛出一个安全异常。

编辑: 对于webkit, Opera和firefox，这是有效的:

input.value = '';

(用这个建议核对上面的答案)

我将看看是否能找到一种更好、更干净的方法来跨浏览器执行此操作，而不需要GC。

Edit2:

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

我一直在寻找简单而干净的方法来清除HTML文件输入，上面的答案是伟大的，但没有一个真正回答我在寻找什么，直到我在网络上遇到了一个简单而优雅的方法来做到这一点:

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

这一切都要归功于克里斯·科伊尔。

// Referneces var control = $("#control"), clearBn = $("#clear"); // Setup the clear functionality clearBn.on("click", function(){ control.replaceWith( control.val('').clone( true ) ); }); // Some bound handlers to preserve when cloning control.on({ change: function(){ console.log( "Changed" ) }, focus: function(){ console.log( "Focus" ) } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" id="control"> <br><br> <a href="#" id="clear">Clear</a>

上述答案提供了一些笨拙的解决方案，原因如下:

我不喜欢必须先包装输入，然后得到html，这是非常复杂和肮脏的。 跨浏览器JS很方便，似乎在这种情况下，有太多的未知可靠地使用类型切换(这，再次，有点脏)和设置值为“

因此，我为您提供了基于jQuery的解决方案:

$('#myinput').replaceWith($('#myinput').clone())

它说什么就做什么，它用自己的克隆来替换输入。克隆文件不会被选中。

优点:

简单易懂的代码 没有笨拙的包装或类型切换 跨浏览器兼容性(如果我说错了请指正)

结果: 快乐的程序员