我一直在寻找简单而干净的方法来清除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>

我也有同样的问题，我想出了这个。

var file = document.querySelector('input'); var emptyFile = document.createElement('input'); emptyFile。Type = 'file'; document.querySelector(“按钮”)。Onclick = function(){ 文件。文件= emptyFile.files; ｝ <输入类型=“文件”> < >按钮明确> < /按钮

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

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

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

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

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

你需要用新的文件输入替换它。 下面是如何用jQuery完成的:

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

当你需要清除输入字段时使用这一行(例如在某些事件上):

inputFile.parent().html( inputFile.parent().html() );

我尝试了大多数的解决方案，但似乎没有人工作。然而，我在下面找到了一个散步的地方。

表单的结构是:form =>标签，输入和提交按钮。在我们选择了一个文件之后，该文件名将通过在JavaScript中手动执行的操作由标签显示。

所以我的策略是:最初提交按钮是禁用的，在文件被选中后，提交按钮禁用属性将被移除，这样我就可以提交文件了。提交后，我清除了标签，这使它看起来像是我清除了文件输入，但实际上不是。然后我将再次禁用提交按钮，以防止提交表单。

通过将提交按钮设置为禁用或不禁用，我可以多次停止提交文件，除非我选择另一个文件。

在我的世界里，一个简单干净的解决方案是，将文件输入文件设置为一个清晰的FileList。

编辑:正如SteJ所说，这不是与Safari合作。

由于我们不能直接创建FileList - I用户DataTransfer作为“hack”

@$input[0].files=new DataTransfer().files 

or

file_input_node.files=new DataTransfer().files