删除预览图片时同步移除file数组中对应文件的实现方案

问题核心 #

原生FileList是只读对象，无法直接修改其中的文件项，因此你需要自己维护一个可编辑的文件数组，替代原input的files属性跟踪用户选择，提交时用这个数组构建表单数据。

修改后的完整代码 #

HTML

<form enctype="multipart/form-data" method="post">
  <input id="choose-files" type="file" name="choose-files[]" multiple>
  <button name="submit" id="submit">SUBMIT</button>
  <div id="preview-wrapper"></div>
</form>

CSS

form {
  padding: 2rem;
  background: red;
  width: 50%;
}

input,
button {
  display: block;
  margin: 1rem 0;
}

.img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin: 0 1rem;
}

img:hover {
  cursor: pointer;
}

JavaScript

let chooseFiles = document.getElementById("choose-files");
let previewWrapper = document.getElementById("preview-wrapper");
let submitBtn = document.getElementById("submit");
// 维护自定义的可编辑文件数组
let selectedFiles = [];

chooseFiles.addEventListener("change", (e) => {
  // 合并新选择的文件到数组
  selectedFiles = [...selectedFiles, ...e.target.files];
  // 重新渲染所有预览图
  renderPreviews();
  console.log('当前选中文件:', selectedFiles);
});

function renderPreviews() {
  // 清空现有预览
  previewWrapper.innerHTML = '';
  
  selectedFiles.forEach((file, index) => {
    const previewImage = new Image();
    previewImage.classList.add("img");
    previewImage.src = URL.createObjectURL(file);
    // 存储文件在数组中的索引，用于删除定位
    previewImage.dataset.index = index;
    
    previewWrapper.appendChild(previewImage);
    
    // 点击删除逻辑
    previewImage.addEventListener("click", () => {
      // 从数组中移除对应文件
      selectedFiles.splice(index, 1);
      // 重新渲染预览，保持状态同步
      renderPreviews();
    });
  });
}

// 拦截表单提交，用自定义数组构建提交数据
submitBtn.addEventListener("click", (e) => {
  e.preventDefault();
  
  const formData = new FormData();
  // 按原input的name属性添加文件
  selectedFiles.forEach(file => {
    formData.append('choose-files[]', file, file.name);
  });
  
  // 发送请求到后端，替换为你的实际接口地址
  fetch('你的后端PHP地址', {
    method: 'POST',
    body: formData
  })
  .then(res => res.text())
  .then(data => {
    console.log('提交成功:', data);
    // 重置状态
    selectedFiles = [];
    renderPreviews();
    chooseFiles.value = '';
  })
  .catch(err => console.error('提交失败:', err));
});

关键细节说明 #

1. 替代只读FileList：用selectedFiles数组跟踪用户选择的文件，完全掌握文件的添加和删除权限。
2. 预览与文件关联：通过data-index属性把预览图和数组中的文件绑定，点击时能精准删除对应项。
3. 同步状态：删除文件后重新渲染所有预览，确保视觉展示和实际提交的文件完全一致，避免索引错位。
4. 表单提交控制：拦截默认提交行为，手动构建FormData，保证提交的是用户最终确认的文件集合。

如果坚持要使用原生表单提交（不用AJAX），可以动态创建隐藏的input[type="file"]元素并添加到表单中，但AJAX的方式更灵活，也更容易处理提交后的状态。

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