JavaScript：dragenter/dragover事件下仅允许JPG文件的校验问题

核心问题分析 #

你的代码存在三个关键问题：

1. 校验逻辑颠倒：当前用find查找是否存在JPG，但需求是所有文件必须都是JPG，只要有一个非JPG就需报错。
2. 错误信息显示逻辑混乱：else后空大括号导致错误信息代码每次都会执行，和if判断无关。
3. 状态切换不完整：未在合法拖入时隐藏错误信息，也未处理非法拖入时的激活状态移除，同时缺少dragleave/drop事件的状态重置逻辑，导致拖放需快速释放的bug。

修复后的代码示例 #

修正后的dragover事件处理 #

container.addEventListener(
  "dragover",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    
    // 检查是否存在非JPG的文件
    const hasInvalidFile = Array.from(e.dataTransfer.items)
      .filter(item => item.kind === 'file') // 只处理文件类型
      .some(item => !item.type.match('image/jpeg'));

    if (!hasInvalidFile) {
      // 所有文件都是JPG：激活拖放区，隐藏错误
      container.classList.add("active");
      error.classList.add("hideit");
    } else {
      // 存在非JPG文件：显示错误，取消激活
      error.innerHTML = "仅允许拖入JPG格式文件"; // 替换为你的错误HTML内容
      error.classList.remove("hideit");
      container.classList.remove("active");
    }
  },
  false
);

补充dragleave事件处理（修复拖放状态卡顿） #

container.addEventListener("dragleave", (e) => {
  e.preventDefault();
  e.stopPropagation();
  container.classList.remove("active");
  error.classList.add("hideit");
});

补充drop事件处理（完成拖放后的状态重置） #

container.addEventListener("drop", (e) => {
  e.preventDefault();
  e.stopPropagation();
  container.classList.remove("active");
  
  // 处理拖入的JPG文件（示例逻辑）
  const validJpgFiles = Array.from(e.dataTransfer.items)
    .filter(item => item.kind === 'file' && item.type.match('image/jpeg'))
    .map(item => item.getAsFile());
  
  console.log("成功拖入的JPG文件：", validJpgFiles);
});

关键修复点说明 #

• 校验逻辑修正：用some检查是否存在非JPG文件，只要有一个就判定为非法，完全匹配需求。
• 状态同步更新：合法拖入时激活拖放区并隐藏错误，非法时显示错误并取消激活，状态完全对应。
• 事件完整处理：添加dragleave和drop事件的状态重置，解决拖放时状态切换不及时、必须快速释放的bug。

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