拖拽多文件校验问题：需确保全部文件为JPG，否则触发报错

原代码使用find()方法，只要找到一个符合条件的JPG文件就判定为有效，导致混合拖拽非JPG文件时不会触发错误。要实现「所有文件均为JPG才允许操作」的逻辑，需要改用every()方法检查所有拖拽项是否都符合要求，具体修改如下：

container.addEventListener(
  "dragenter",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    
    // 检查每个拖拽项都是文件且为JPG/JPEG格式
    const allFilesValid = Array.from(e.dataTransfer.items).every(item => {
      return item.kind === 'file' && item.type === 'image/jpeg';
    });
    
    if (allFilesValid) {
      container.classList.add("active");
      // 隐藏错误提示
      error.classList.add("hideit");
    } else {
      error.innerHTML = "请仅拖拽JPG/JPEG格式的文件";
      error.classList.remove("hideit");
      // 移除激活状态
      container.classList.remove("active");
    }
  },
  false
);

关键修改说明 #

• 用every()替代find()：every()会遍历所有拖拽项，只有当所有项都满足条件时才返回true，确保没有不符合要求的文件混入
• 增加item.kind === 'file'检查：过滤非文件类型的拖拽内容（如文本、链接），避免误判
• 同步状态更新：有效时隐藏错误并添加容器激活类，无效时显示错误并移除激活类
• 同样的修改需要应用到dragover事件（原代码中两个事件逻辑相同）

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