如何从HTML的type为file的input控件中删除单个选中文件

原代码失效原因 #

input[type=file]的files属性是只读的类数组FileList对象，不属于普通JS数组，不支持直接调用splice等数组方法修改内容，所以你原来的删除逻辑无法生效。

实现思路 #

我们可以通过中间变量存储选中的文件列表，删除指定文件后，借助DataTransfer对象构建新的FileList，再赋值给input的files属性完成修改。

完整可运行代码 #

JS代码 #

// 用于持久化存储选中的文件列表
let selectedFiles = [];

// 监听文件选择事件，同步更新存储的文件数组
document.getElementById('files').addEventListener('change', function(e) {
  selectedFiles = Array.from(e.target.files);
});

function remove(i) {
  // 你现有按钮传的是从1开始的序号，数组索引从0开始，所以做减1处理
  const targetIndex = i - 1;
  // 边界判断，避免索引越界
  if (targetIndex < 0 || targetIndex >= selectedFiles.length) return;
  // 从存储的文件数组中删除对应项
  selectedFiles.splice(targetIndex, 1);
  // 构建新的FileList赋值给input控件
  const dataTransfer = new DataTransfer();
  selectedFiles.forEach(file => dataTransfer.items.add(file));
  document.getElementById('files').files = dataTransfer.files;
}

function removeAll(){
  document.getElementById("files").value = null;
  selectedFiles = [];
}

HTML代码 #

和你现有的代码保持一致即可，不需要修改：

<input id="files" type="file" multiple="multiple">

<button onclick="remove(1)">delete 1st</button>
<button onclick="remove(2)">delete 2nd</button>
<button onclick="remove(3)">delete 3rd</button>

<button onclick="removeAll()">delete all</button>

补充说明 #

• 如果你后续把按钮的传参改成从0开始的索引，直接删除targetIndex = i -1这行即可。
• 该方案兼容所有现代主流浏览器，IE系列浏览器不支持DataTransfer对象，如果需要适配IE需要额外做降级处理。

内容的提问来源于stack exchange，提问作者coding_noob