如何删除输入文件中的附件？ (火狐)答案

【问题标题】：How to remove the attached file in input file? (Firefox)如何删除输入文件中的附件？ (火狐)
【发布时间】：2015-05-25 03:51:28
【问题描述】：

如何从<input type="file">元素中移除选中的附件？
当您已经选择了一个附件时，Firefox 似乎无法删除该附件。

我试图删除名称并单击打开，但没有任何反应。
我也尝试取消，但附件仍然存在。

我的解决方案是添加一些 onclick javascript 来删除该值，但是有没有办法不添加一些脚本，就像在 chrome 的附件中一样？

【问题讨论】：

标签： javascript firefox attachment

【解决方案1】：

不，我认为您将不得不插入一些 js。

似乎 Firefox 将文件输入的值保存到缓存中，（就像任何其他输入值 btw 一样）并且仅在添加新值时更新它。

取消按钮不会清除它，这在我对英语的理解中是有道理的，因为如果我想“取消”选择另一个文件的操作，这并不意味着我想“清除”那个我以前有过。

如果你真的希望你的用户能够清除这些，你可以添加一些按钮来做到这一点

var f = document.querySelectorAll('input[type=file]'),
clearInput = function(){this.previousSibling.value = '';};
for(var i = 0; i < f.length; i++){
  button = document.createElement('button');
  button.textContent = 'clear';
  button.addEventListener('click', clearInput);
  f[i].parentNode.insertBefore(button, f[i].nextSibling);
}

<input type="file"/><br>
<input type="file"/><br>
<input type="file"/><br>

或在他每次搜索新文件时清除它。

var f = document.querySelectorAll('input[type=file]');
var clearInput = function(){this.value=''};
for(var i=0;i<f.length; i++)
  f[i].addEventListener('click', clearInput);

<input type="file"/><br>
<input type="file"/><br>
<input type="file"/><br>

【讨论】：

是的，取消按钮有点令人困惑，因为如果您经常使用 chrome，当您点击取消按钮或关闭按钮时，它会自动删除选定的文件。顺便说一句，感谢您的回答。投票为正确答案，因为您是对的，并且您是唯一回答我问题的人。