拖拽多图上传后，同class的addEventListener仅响应首个元素的问题

你的问题出在事件绑定的逻辑上。在previewFile函数的onloadend回调里，你使用了document.querySelector(".filter-me")——这个方法只会返回页面中第一个匹配.filter-me选择器的元素。所以当你上传多张图片时，每次执行这个回调，都只是给第一张预览图重复绑定点击事件，后面新增的预览图完全没被绑定到，自然点击没反应。

另外还有个小问题：你给每个预览项都加了id="item"，HTML里id必须是唯一的，这个会导致DOM结构不合法，建议去掉或者改成动态生成的唯一标识（比如用文件名+时间戳）。

不需要全局查找元素，而是直接针对当前生成的预览图进行事件绑定。我们可以把HTML字符串转换成DOM元素后，直接找到其中的img标签绑定事件，再插入到页面中：

function previewFile(file, fileName) {
  let reader = new FileReader();
  reader.readAsDataURL(file);
  
  reader.onload = function () {
    // 创建一个临时容器来解析HTML字符串
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = `<div class="col-md-4"><div class="item"><img src="${reader.result}" alt="" class="img-fluid filter-me"><span>${fileName}</span></div></div>`;
    
    // 找到当前生成的img元素
    const filterMe = tempDiv.querySelector(".filter-me");
    filterMe.addEventListener("click", function () {
      console.log(this);
    });
    
    // 将临时容器里的内容插入到loadImage中
    loadImage.appendChild(tempDiv.firstElementChild);
  }
}

这样每次处理一张图片，就只给当前这张图片绑定点击事件，不会影响之前或之后的元素。

如果要处理大量动态添加的元素，事件委托是更高效的方案——只需要给父元素loadImage绑定一次事件，利用事件冒泡机制来处理所有子元素的点击。这样不管后续添加多少预览图，都不需要重复绑定事件，代码更简洁：

步骤1：先给父元素绑定事件（可以放在页面初始化的地方，比如DOMContentLoaded里） #

document.addEventListener('DOMContentLoaded', function() {
  loadImage.addEventListener('click', function(e) {
    // 判断点击的元素是不是我们要的预览图
    if(e.target.classList.contains('filter-me')) {
      console.log(e.target); // 这里e.target就是被点击的图片元素
    }
  });
});

步骤2：简化previewFile函数，去掉里面的事件绑定逻辑 #

function previewFile(file, fileName) {
  let reader = new FileReader();
  reader.readAsDataURL(file);
  
  reader.onload = function () {
    let html = `<div class="col-md-4"><div class="item"><img src="${reader.result}" alt="" class="img-fluid filter-me"><span>${fileName}</span></div></div>`;
    loadImage.innerHTML += html;
  }
}

这种方式不仅解决了你的问题，还避免了重复绑定事件的性能浪费，同时代码更易维护。

1. 文件校验逻辑优化：当前代码中，如果有一个文件格式不合法，会直接return false，但之前已经合法的文件已经被添加到预览和FormData里了。如果想跳过不合法文件继续处理其他文件，可以把return false改成continue，并提示用户哪一个文件不合法：

for (const [key, value] of Object.entries(files)) {
  let extension = value.name.split(".").pop().toLowerCase(); // 转小写避免大小写问题，比如JPG和jpg
  if (!allowedExt.includes(extension)) {
    alert(`文件 ${value.name} 格式不合法，我们只接受 ${allowedExt.join(", ")} 格式`);
    continue; // 跳过当前不合法文件，继续处理下一个
  }
  formData.append('files[]', value);
  previewFile(value, value.name);
}

2. FileReader的错误处理：建议给FileReader添加onerror回调，处理读取文件失败的情况：

reader.onerror = function() {
  alert(`读取文件 ${fileName} 失败，请重试`);
  console.error(reader.error);
}

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