jQuery FileReader多文件上传预览与删除同步更新求助

嘿，作为脚本开发新手，你的需求其实很典型，我帮你整理了一套完整的实现方案，包含文件名列表（带删除按钮）和同步预览的功能，代码注释很详细，你可以直接参考使用~

HTML结构 #

<!-- 支持多文件选择的上传控件 -->
<input type="file" id="PageBGimageBtn" multiple accept="image/*">

<!-- 用来展示文件名和删除按钮的容器 -->
<div id="fileList" class="file-list"></div>

<!-- 图片预览容器 -->
<div id="previewContainer" class="preview-container"></div>

CSS样式（美化用，可按需调整） #

.file-list {
  margin: 10px 0;
}
.file-item {
  display: flex;
  align-items: center;
  padding: 8px;
  margin-bottom: 5px;
  background: #f5f5f5;
  border-radius: 4px;
}
.file-name {
  flex: 1;
  margin-right: 10px;
}
.delete-btn {
  cursor: pointer;
  color: #dc3545;
  font-weight: bold;
  padding: 2px 6px;
  border: 1px solid #dc3545;
  border-radius: 50%;
  font-size: 12px;
}
.preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}
.preview-item {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
}

jQuery脚本核心逻辑 #

$(document).ready(function() {
  // 自定义数组存储选中的文件（原生FileList只读，无法直接删除）
  let selectedFiles = [];

  // 监听文件选择事件
  $('#PageBGimageBtn').on('change', function(e) {
    // 把新选中的文件转成数组
    const newFiles = Array.from(e.target.files);
    
    // 合并新文件到现有数组（如果需要避免重复文件，可以在这里加判断逻辑）
    selectedFiles = [...selectedFiles, ...newFiles];
    
    // 更新文件名列表和预览图
    renderFileList();
    renderPreview();
    
    // 重置input值，否则重复选择同一文件不会触发change事件
    this.value = '';
  });

  // 渲染文件名列表，每个文件带删除按钮
  function renderFileList() {
    const $fileList = $('#fileList');
    $fileList.empty(); // 清空旧内容

    selectedFiles.forEach((file, index) => {
      // 创建单个文件项
      const $fileItem = $('<div class="file-item"></div>');
      $fileItem.append(`<span class="file-name">${file.name}</span>`);
      
      // 创建删除按钮并绑定点击事件
      const $deleteBtn = $('<span class="delete-btn">&times;</span>');
      $deleteBtn.on('click', function() {
        // 从数组中移除对应文件
        selectedFiles.splice(index, 1);
        // 重新渲染UI
        renderFileList();
        renderPreview();
      });
      
      $fileItem.append($deleteBtn);
      $fileList.append($fileItem);
    });
  }

  // 渲染图片预览
  function renderPreview() {
    const $previewContainer = $('#previewContainer');
    $previewContainer.empty(); // 清空旧预览

    selectedFiles.forEach(file => {
      // 生成图片预览的临时URL
      const previewUrl = URL.createObjectURL(file);
      const $previewImg = $(`<img src="${previewUrl}" alt="${file.name}" class="preview-item">`);
      
      // 图片加载完成后释放临时URL，避免内存泄漏
      $previewImg.on('load', function() {
        URL.revokeObjectURL(previewUrl);
      });
      
      $previewContainer.append($previewImg);
    });
  }
});

• 自定义文件数组：原生的input.files是只读的FileList对象，没办法直接删除里面的文件，所以我们用selectedFiles数组来管理选中的文件，这样添加、删除操作都很灵活。
• 重置input值：如果不重置input的value，用户重复选择同一批文件时，change事件不会触发，这是一个常见的小坑~
• 预览资源清理：用URL.createObjectURL生成的临时链接会占用内存，所以在图片加载完成后要调用URL.revokeObjectURL释放资源，避免内存泄漏。
• 同步更新：不管是添加新文件还是删除已有文件，都会重新调用renderFileList()和renderPreview()，确保文件名列表和预览容器始终同步。

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