JavaScript拖拽文件校验问题：仅允许JPG文件时误触发错误

1. 修正文件校验逻辑 #

你的代码存在两个核心问题：

• 语法错误：else {} error.innerHTML = ... 里的空花括号会让错误提示语句脱离else分支，无论是否有合法JPG文件都会执行，这是错误提示误触发的直接原因。
• 校验逻辑反向：当前代码是“找到一个JPG就激活区域”，但需求是“只要有一个非JPG就显示错误”，应该先检查是否存在非JPG文件，再做判断。

另外，部分场景下dataTransfer.items的type可能为空（比如部分系统拖拽本地文件时），建议同时通过文件名后缀做兜底校验。

修正后的dragover/dragenter事件代码：

container.addEventListener(
  "dragover",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    
    // 转换为文件数组，同时处理items和files两种情况
    const files = Array.from(e.dataTransfer.items)
      .map(item => item.getAsFile())
      .filter(file => file !== null);
    
    // 检查所有文件是否都是JPG/JPEG
    const allValid = files.every(file => {
      // 同时校验MIME类型和文件名后缀
      const isMimeValid = file.type === 'image/jpeg' || file.type === 'image/jpg';
      const isExtValid = /\.(jpg|jpeg)$/i.test(file.name);
      return isMimeValid || isExtValid;
    });

    if (allValid) {
      container.classList.add("active");
      error.classList.add("hideit"); // 隐藏错误提示
    } else {
      container.classList.remove("active");
      error.innerHTML = "仅允许上传JPG/JPEG格式的文件";
      error.classList.remove("hideit"); // 显示错误提示
    }
  },
  false
);

2. 修复拖拽区域释放bug #

拖拽区域需要快速释放才能上传，通常是因为没有正确处理dragleave事件，以及drop事件的默认行为未完全阻止。需要补充以下处理：

• 添加dragleave事件，清除激活状态：

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

• 确保drop事件正确阻止默认行为，并处理文件上传：

container.addEventListener("drop", (e) => {
  e.preventDefault();
  e.stopPropagation();
  container.classList.remove("active");
  
  const files = Array.from(e.dataTransfer.files);
  // 这里添加你的文件上传逻辑
}, false);

关键注意事项 #

• 必须在dragover、dragenter、drop事件中调用e.preventDefault()和e.stopPropagation()，否则浏览器会默认打开拖拽的文件，导致上传失败。
• 同时校验MIME类型和文件名后缀，避免部分场景下MIME类型识别不准确的问题。

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