如何解决JavaScript/jQuery中无法移除<input type="file" multiple/>的FileList对象问题？

嘿，我完全懂你碰到的困扰！<input type="file" multiple>对应的FileList是只读的原生对象，浏览器出于安全限制，不允许直接修改它的内容——这就是为什么你用delete操作符（包括结合jQuery的写法）完全没用的原因。下面给你两种靠谱的解决方案：

一、替换原input的FileList（视觉上更新选择的文件） #

如果需要让页面上的文件输入框也同步显示删除后的文件列表，可以通过DataTransfer对象来创建新的FileList，替换掉原来的：

// 获取原生文件输入框元素（jQuery的话要取[0]拿到DOM对象）
const fileInput = document.querySelector('input[type="file"]');
// 或者用jQuery写法: const fileInput = $('input[type="file"]')[0];

// 假设要删除索引为0的文件，先筛选出需要保留的文件
const filesToKeep = Array.from(fileInput.files).filter((file, index) => index !== 0);

// 创建DataTransfer对象，用来存放筛选后的文件
const dataTransfer = new DataTransfer();
filesToKeep.forEach(file => dataTransfer.items.add(file));

// 将新的FileList赋值给input的files属性，完成替换
fileInput.files = dataTransfer.files;

这个方法在现代浏览器（Chrome、Firefox、Edge等）都能正常工作，替换后输入框的文件列表会自动更新。

二、提交时过滤文件（无需修改原输入框） #

如果只是不想把某个文件提交到后台，没必要修改输入框的文件列表，直接在组装提交数据时跳过要删除的文件即可：

const fileInput = document.querySelector('input[type="file"]');
const formData = new FormData();

// 遍历文件，只添加需要保留的到FormData
Array.from(fileInput.files).forEach((file, index) => {
  if (index !== 0) { // 跳过要删除的文件
    formData.append('files[]', file, file.name);
  }
});

// 用fetch提交（也可以用XMLHttpRequest或者jQuery的ajax）
fetch('/your-upload-url', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(result => console.log('上传成功:', result))
.catch(error => console.error('上传失败:', error));

关键提醒 #

• FileList和它包含的File对象都是只读的，永远不能直接修改或删除其中的元素，只能通过替换整个FileList或者提交时过滤的方式实现需求。
• 如果用jQuery操作，记得要先拿到原生的DOM元素（$input[0]），因为jQuery的包装对象没法直接访问files属性。

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