如何使用JavaScript从input文件控件中移除已选中的单个文件？

嘿，这个问题我碰到过好几次啦——原生的FileList是只读对象，没法直接删除单个选中的文件，但咱们有办法绕开这个限制，针对你这个id="images"的多文件上传控件，我给你分享两种实用的实现方式：

方案一：使用DataTransfer（推荐，现代浏览器友好） #

这个方法简洁高效，利用DataTransfer对象来重新构建文件集合，步骤很清晰：

1. 获取目标input元素和当前选中的文件列表
2. 过滤掉你想要移除的那个文件
3. 用DataTransfer包裹过滤后的文件，再赋值回input的files属性

举个具体的代码例子，比如我们要移除索引为1的文件（你可以根据实际需求改成按文件名、文件大小等条件过滤）：

// 获取文件输入框
const fileInput = document.getElementById('images');

// 假设要移除第2个选中的文件（索引从0开始）
const indexToRemove = 1;

// 把只读的FileList转成数组，方便操作
const filesArray = Array.from(fileInput.files);

// 过滤掉目标文件
const updatedFiles = filesArray.filter((file, index) => index !== indexToRemove);

// 创建DataTransfer对象来存放新的文件列表
const dataTransfer = new DataTransfer();
updatedFiles.forEach(file => dataTransfer.items.add(file));

// 更新input的选中文件
fileInput.files = dataTransfer.files;

如果是通过用户点击某个文件的删除按钮来移除，你可以直接拿到对应的File对象，把过滤条件改成file !== targetFile就好啦。

方案二：手动构建FileList（兼容旧环境） #

如果需要兼容一些比较老的浏览器（比如IE11），可以手动构建一个模拟的FileList对象：

const fileInput = document.getElementById('images');
const indexToRemove = 1;
const filesArray = Array.from(fileInput.files);
const updatedFiles = filesArray.filter((file, index) => index !== indexToRemove);

// 手动创建一个继承自FileList原型的对象
const newFileList = Object.create(FileList.prototype);
// 设置length属性
Object.defineProperty(newFileList, 'length', { value: updatedFiles.length });

// 给每个索引绑定对应的文件
updatedFiles.forEach((file, index) => {
  Object.defineProperty(newFileList, index, { value: file });
});

// 更新input的files属性
fileInput.files = newFileList;

几个注意点 #

• 这两种方法都只是修改input控件的选中状态，不会对用户本地的文件做任何改动
• 如果你在页面上渲染了已选文件的列表，记得同步更新DOM，把移除的文件条目删掉
• 方案一支持绝大多数现代浏览器（Chrome、Firefox、Edge等），方案二主要用于特殊的旧环境兼容

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