如何从multiple类型file input删除单个文件？预览删除后input未同步

问题根源 #

原生input[type=file]的FilesList是只读对象，无法直接修改其中的文件。你的代码仅维护了自定义files数组管理预览，但删除操作不会同步到input的files属性；同时原代码存在重复绑定change事件、限制单文件选择的问题，不符合多图片上传需求。

修正方案 #

以自定义files数组作为文件管理的唯一数据源，删除操作直接修改该数组并更新预览；上传时基于这个数组构建FormData提交，而非依赖input的files属性。同时修复原代码逻辑错误：

修正后的HTML

<div class="drag-area">
  <span class="select">选择图片</span>
  <input type="file" multiple accept="image/*" />
</div>
<div class="container"></div>
<button class="card button">上传文件</button>

修正后的JavaScript

/** 变量定义 */
let files = [];
const dragArea = document.querySelector('.drag-area');
const input = document.querySelector('.drag-area input');
const button = document.querySelector('.card button');
const selectBtn = document.querySelector('.drag-area .select');
const container = document.querySelector('.container');

/** 点击选择按钮触发文件选择 */
selectBtn.addEventListener('click', () => input.click());

/** 文件选择事件：批量添加文件到自定义数组 */
input.addEventListener('change', () => {
  const selectedFiles = Array.from(input.files);
  // 可选：过滤重复文件（通过文件名+大小判断）
  const newFiles = selectedFiles.filter(file => !files.some(existFile => existFile.name === file.name && existFile.size === file.size));
  files.push(...newFiles);
  // 重置input，允许重复选择同文件
  input.value = '';
  showImages();
});

/** 渲染预览图片 */
function showImages() {
  if (files.length === 0) {
    container.innerHTML = '';
    return;
  }
  const imagesHtml = files.reduce((prev, file, index) => {
    return prev + `
      <div class="image">
        <img src="${URL.createObjectURL(file)}" alt="预览图">
        <span onclick="delImage(${index})">&times;</span>
      </div>
    `;
  }, '');
  container.innerHTML = imagesHtml;
}

/** 删除指定索引的文件 */
function delImage(index) {
  // 释放ObjectURL，避免内存泄漏
  URL.revokeObjectURL(files[index]);
  files.splice(index, 1);
  showImages();
}

/** 上传文件：基于自定义数组构建FormData */
button.addEventListener('click', () => {
  if (files.length === 0) {
    alert('请选择要上传的文件');
    return;
  }
  const formData = new FormData();
  files.forEach(file => {
    formData.append('uploadFiles', file);
  });
  
  // 替换为你的实际上传接口
  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(res => res.json())
    .then(data => {
      console.log('上传成功', data);
      files = [];
      showImages();
    }).catch(err => {
      console.error('上传失败', err);
    });
});

关键说明 #

1. 放弃修改原生FilesList：利用自定义files数组作为唯一数据源，所有增删操作针对该数组。
2. 重置input实现重复选同文件：选择后设置input.value = ''，解决无法重复选择同名文件的问题。
3. 内存泄漏防护：删除文件时调用URL.revokeObjectURL，释放浏览器资源。
4. 上传逻辑对齐数据源：提交时遍历自定义数组构建FormData，确保上传的是最新文件集合。

内容的提问来源于stack exchange，提问作者Malik Zubair Mukhtar