如何在点击时使用jQuery清除多文件输入框的特定文件？

我懂你现在的痛点——原生的多选文件输入框没法直接删除单个选中的文件，只能清空全部，而你想要点击预览图上的删除按钮时，精准移除对应的文件对吧？下面给你一套可行的实现方案，基于你现有的代码来修改：

首先明确核心问题：原生的FileList是只读对象，不能直接修改其中的元素，所以我们需要用DataTransfer API来模拟一个可编辑的文件列表，替换掉原输入框的文件集合。

第一步：修改预览函数，给删除按钮绑定正确的索引 #

你现有的预览函数需要调整，确保每个删除按钮能对应到正确的文件索引，还要处理异步读取文件时的索引问题（避免循环异步导致的索引混乱）：

function preview_image() {
  const input = document.getElementById("image");
  const totalFiles = input.files.length;
  const previewContainer = document.querySelector(".image_preview");
  
  // 先清空旧的预览内容
  previewContainer.innerHTML = "";

  // 遍历所有选中的文件，用闭包保存当前索引
  for (let i = 0; i < totalFiles; i++) {
    (function(fileIndex) {
      const file = input.files[fileIndex];
      const reader = new FileReader();

      reader.onload = function(e) {
        // 创建单个预览项的DOM结构
        const previewItem = document.createElement("div");
        previewItem.style.display = "inline-block";
        previewItem.style.margin = "0 10px 10px 0";
        previewItem.innerHTML = `
          <img src="${e.target.result}" alt="文件预览" style="width:100px;height:100px;object-fit:cover;border:1px solid #eee;">
          <button class="delete-btn" style="display:block;margin-top:5px;">删除</button>
        `;
        previewContainer.appendChild(previewItem);

        // 给删除按钮绑定点击事件
        previewItem.querySelector(".delete-btn").addEventListener("click", function() {
          // 删除指定索引的文件，并重新生成预览
          removeSpecificFile(fileIndex);
          preview_image();
        });
      };

      reader.readAsDataURL(file);
    })(i);
  }
}

第二步：实现删除单个文件的核心函数 #

这个函数负责把原文件列表转成数组，移除指定元素后，用DataTransfer生成新的文件列表赋值给输入框：

function removeSpecificFile(index) {
  const input = document.getElementById("image");
  // 把只读的FileList转成可编辑的数组
  const fileArray = Array.from(input.files);
  
  // 移除指定索引的文件
  fileArray.splice(index, 1);

  // 创建新的DataTransfer对象，用来存放剩下的文件
  const dataTransfer = new DataTransfer();
  fileArray.forEach(file => dataTransfer.items.add(file));

  // 替换输入框的文件集合
  input.files = dataTransfer.files;
}

关键细节说明 #

• 闭包的作用：因为FileReader.onload是异步执行的，如果不用闭包保存当前循环的索引，所有删除按钮都会绑定到最后一个索引，导致删除错误。
• DataTransfer API：这是HTML5的API，允许我们创建可操作的文件集合，完美解决原生FileList只读的问题。
• 重新生成预览：删除文件后调用preview_image()，确保预览内容和输入框的文件列表保持同步。

这样修改后，你点击预览图的删除按钮，对应的文件就会从输入框的选中列表里移除，后续提交表单时也不会包含这个被删除的文件了。

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