多图预览脚本优化需求：文件名显示及批量删除功能实现

嘿，我来帮你搞定这两个痛点！先拆解下你遇到的问题：

1. 多张图片上传时文件名显示错误的原因&修复 #

你碰到的是很典型的循环作用域绑定陷阱——如果原脚本在循环里直接引用file变量，循环结束后这个变量会指向最后一个文件，导致所有预览图都绑定了最后一个文件名。我们需要给每个文件创建独立的作用域，确保每个预览元素能对应自己的文件名。

假设原脚本的核心逻辑大概是这样（简化版）：

const input = document.getElementById('fileInput');
const previewContainer = document.getElementById('previewContainer');

input.addEventListener('change', function(e) {
  const files = e.target.files;
  for (var i = 0; i < files.length; i++) {
    const file = files[i];
    const reader = new FileReader();
    reader.onload = function() {
      // 创建预览图
      const img = document.createElement('img');
      img.src = reader.result;
      // 原代码直接用file.name，会出现作用域问题
      const fileName = document.createElement('div');
      fileName.textContent = file.name;
      previewContainer.appendChild(img);
      previewContainer.appendChild(fileName);
    }
    reader.readAsDataURL(file);
  }
});

修复方案：用let创建块级作用域 #

把循环里的var i改成let i，这样每个循环迭代都会保留当前file的独立引用，同时我们可以把图片和文件名放在同一个容器里，让结构更清晰：

const input = document.getElementById('fileInput');
const previewContainer = document.getElementById('previewContainer');

input.addEventListener('change', function(e) {
  const files = e.target.files;
  // 用let代替var，给每个循环迭代创建独立作用域
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const reader = new FileReader();
    reader.onload = function() {
      // 创建单个预览项的容器
      const previewItem = document.createElement('div');
      previewItem.className = 'preview-item';
      previewItem.style.display = 'inline-block';
      previewItem.style.margin = '10px';
      previewItem.style.textAlign = 'center';
      
      const img = document.createElement('img');
      img.src = reader.result;
      img.style.maxWidth = '200px';
      img.style.maxHeight = '200px';
      
      // 文件名放在图片下方
      const fileNameEl = document.createElement('div');
      fileNameEl.className = 'file-name';
      fileNameEl.style.marginTop = '5px';
      fileNameEl.textContent = file.name;
      
      previewItem.appendChild(img);
      previewItem.appendChild(fileNameEl);
      previewContainer.appendChild(previewItem);
    }
    reader.readAsDataURL(file);
  }
});

这样每个预览项都会绑定自己对应的文件名，不会再串号了！

2. 添加「移除所有图片」功能 #

这个功能需要完成两件事：清空预览容器的所有内容，同时重置文件输入框的状态（否则重新上传相同文件不会触发change事件）。

实现步骤： #

1. 先在HTML里添加移除按钮：

<button id="removeAllBtn">移除所有图片</button>

2. 给按钮绑定点击事件：

const removeAllBtn = document.getElementById('removeAllBtn');

removeAllBtn.addEventListener('click', function() {
  // 清空预览容器
  previewContainer.innerHTML = '';
  // 重置文件输入框，允许重新选择相同文件
  input.value = '';
  // 如果有单独保存文件列表的变量，也记得清空它
  // 比如：if (window.selectedFiles) window.selectedFiles = [];
});

点击按钮就能一键清空所有预览和已选文件啦！

完整整合示例 #

把两部分代码整合起来，最终效果如下：

<input type="file" id="fileInput" multiple>
<div id="previewContainer"></div>
<button id="removeAllBtn">移除所有图片</button>

<script>
const input = document.getElementById('fileInput');
const previewContainer = document.getElementById('previewContainer');
const removeAllBtn = document.getElementById('removeAllBtn');

input.addEventListener('change', function(e) {
  const files = e.target.files;
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const reader = new FileReader();
    reader.onload = function() {
      const previewItem = document.createElement('div');
      previewItem.className = 'preview-item';
      previewItem.style.display = 'inline-block';
      previewItem.style.margin = '10px';
      previewItem.style.textAlign = 'center';
      
      const img = document.createElement('img');
      img.src = reader.result;
      img.style.maxWidth = '200px';
      img.style.maxHeight = '200px';
      
      const fileNameEl = document.createElement('div');
      fileNameEl.className = 'file-name';
      fileNameEl.style.marginTop = '5px';
      fileNameEl.textContent = file.name;
      
      previewItem.appendChild(img);
      previewItem.appendChild(fileNameEl);
      previewContainer.appendChild(previewItem);
    }
    reader.readAsDataURL(file);
  }
});

removeAllBtn.addEventListener('click', function() {
  previewContainer.innerHTML = '';
  input.value = '';
});
</script>

这样应该就能完美解决你的两个需求了！

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