多文件上传表单文件移除失败求助：无法删除已选文件

input.files返回的是只读的FileList对象，你无法直接修改它的内容——不管是用splice临时转换数组操作，还是用delete尝试删除属性，都不会对原FileList产生影响，这就是你两种方法都无效的核心原因。

正确的思路是：维护一个独立的数组来跟踪用户选中的文件，所有添加、删除操作都针对这个数组，最终上传时用这个数组构造请求数据。

完整实现示例 #

HTML 代码

<input type="file" id="fileInput" multiple onchange="handleFileSelect()" style="width: 85px">
<div id="fileList"></div>
<button onclick="uploadFiles()">确认上传</button>

JavaScript 代码

// 用来维护所有待上传的文件
let selectedFiles = [];

// 处理文件选择事件
function handleFileSelect() {
  const input = document.getElementById('fileInput');
  // 将新选择的文件合并到数组中
  selectedFiles = [...selectedFiles, ...Array.from(input.files)];
  // 清空input值，允许重复选择相同文件
  input.value = '';
  displayFiles();
}

// 删除指定索引的文件
function removeFile(index) {
  selectedFiles.splice(index, 1);
  displayFiles();
}

// 渲染文件列表
function displayFiles() {
  const fileListEl = document.getElementById('fileList');
  fileListEl.innerHTML = '';

  selectedFiles.forEach((file, index) => {
    const item = document.createElement('div');
    item.innerHTML = `${file.name} <button onclick="removeFile(${index})">删除</button>`;
    fileListEl.appendChild(item);
  });
}

// 上传文件逻辑
function uploadFiles() {
  const formData = new FormData();
  // 将数组中的文件添加到FormData
  selectedFiles.forEach(file => {
    formData.append('files[]', file);
  });

  // 替换成你的上传接口地址
  fetch('/your-upload-api', {
    method: 'POST',
    body: formData
  }).then(res => {
    console.log('上传完成');
  }).catch(err => {
    console.error('上传失败', err);
  });
}

关键细节说明 #

• 所有文件操作都围绕selectedFiles数组进行，完全避开了无法修改的FileList对象。
• 每次选择文件后清空input.value，解决了input无法重复选择相同文件的问题。
• 上传时通过FormData组装文件，和直接使用input.files的后端接收逻辑完全兼容。

内容的提问来源于stack exchange，提问作者อนันดา สองสกุล