如何在文件输入预览中删除单张图片？附现有预览实现代码

要实现单张图片删除，核心问题是原生file input的files属性是只读的，没法直接修改，所以得自己维护一个文件列表来跟踪选中的文件，然后同步更新预览和这个列表。下面是修改后的完整代码：

修改后的HTML代码 #

<div>
  <input style="border: solid 1px #2a2f40; padding: 10px; width: auto; margin: 5px 0;" 
         type="file" name="file[]" id="file" multiple="multiple"  
         accept=".jpg, .jpeg, .png">
  <legend style="font-size:10px;">(jpg, jpeg, png) Max file size: 15 MB.</legend>
  <div id="result" class="uploadPreview"></div>
</div>

修改后的JS代码 #

window.onload = function() {
  if (window.File && window.FileList && window.FileReader) {
    const filesInput = document.getElementById("file");
    const output = document.getElementById("result");
    // 自己维护选中的文件列表
    let selectedFiles = [];

    // 渲染预览的函数
    function renderPreview() {
      // 清空现有预览
      output.innerHTML = '';
      selectedFiles.forEach((file, index) => {
        const picReader = new FileReader();
        picReader.addEventListener("load", function(event) {
          const picFile = event.target;
          const div = document.createElement("div");
          // 给预览项加删除按钮，绑定索引用于删除
          div.innerHTML = `
            <img class='thumbnail' src='${picFile.result}' title='${picFile.name}'/>
            <button class="delete-btn" data-index="${index}">删除</button>
          `;
          output.appendChild(div);
          
          // 绑定删除按钮事件
          div.querySelector('.delete-btn').addEventListener('click', function() {
            const deleteIndex = parseInt(this.dataset.index);
            // 从文件列表中移除对应文件
            selectedFiles.splice(deleteIndex, 1);
            // 重新渲染预览
            renderPreview();
          });
        });        
        picReader.readAsDataURL(file);
      });
    }

    // 文件选择事件处理
    filesInput.addEventListener("change", function(event) {
      const newFiles = Array.from(event.target.files);
      // 过滤图片文件，合并到现有列表
      const validFiles = newFiles.filter(file => file.type.match('image'));
      selectedFiles = [...selectedFiles, ...validFiles];
      // 重新渲染预览
      renderPreview();
    });

    // 如果需要提交表单，示例代码：
    // document.querySelector('form').addEventListener('submit', function(e) {
    //   e.preventDefault();
    //   const formData = new FormData();
    //   selectedFiles.forEach(file => {
    //     formData.append('file[]', file);
    //   });
    //   // 这里用fetch或XMLHttpRequest发送formData到后端
    //   fetch('/upload', { method: 'POST', body: formData });
    // });
  }
}

关键逻辑说明 #

• 维护自定义文件列表：用selectedFiles数组存储所有选中的图片，取代原生input的只读files属性，这样才能实现删除操作。
• 动态渲染预览：每次文件列表变化（新增或删除），都调用renderPreview重新生成预览项，确保预览和文件列表同步。
• 删除按钮绑定：每个预览项的删除按钮携带对应文件的索引，点击时通过splice从数组中移除该文件，再重新渲染预览。
• 表单提交适配：提交时需要从selectedFiles数组中取文件，添加到FormData里发送，不能直接用原input的files（因为它还是包含所有初始选中的文件，没反映删除操作）。

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