实现拖拽文件至上传区悬停时显示格式错误提示（而非释放后）

核心思路 #

在文件拖拽进入（dragenter）和悬停（dragover）上传区域时，直接从拖拽事件中获取文件对象，校验其类型；同时在拖拽离开（dragleave）区域时重置错误提示状态，确保交互流畅。

修改后的代码实现 #

// 抽离错误提示与隐藏逻辑，复用性更强
const showTypeError = () => {
  container.classList.remove("dropped");
  submit.classList.remove("hideit");
  error.innerHTML = "仅支持JPG/JPEG格式的图片"; // 替换为你的错误HTML内容
  error.classList.remove("hideit");
};

const hideError = () => {
  error.classList.add("hideit");
};

// 增强型文件类型校验：兼容MIME类型和文件名后缀
const isValidImage = (file) => {
  const allowedMimeTypes = ["image/jpeg"];
  const allowedExtensions = [".jpg", ".jpeg"];

  // 优先校验MIME类型
  if (allowedMimeTypes.includes(file.type)) {
    return true;
  }

  // 兼容无MIME类型的情况，校验文件名后缀
  const fileName = file.name.toLowerCase();
  return allowedExtensions.some(ext => fileName.endsWith(ext));
};

container.addEventListener(
  "dragenter", 
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.add("active");
    
    const files = e.dataTransfer?.files;
    if (files && files.length > 0) {
      isValidImage(files[0]) ? hideError() : showTypeError();
    }
  },
  false
);

container.addEventListener(
  "dragover",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.add("active");
    
    const files = e.dataTransfer?.files;
    if (files && files.length > 0) {
      isValidImage(files[0]) ? hideError() : showTypeError();
    }
  },
  false
);

// 拖拽离开时重置状态
container.addEventListener(
  "dragleave",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.remove("active");
    hideError();
  },
  false
);

关键说明 #

1. 事件中获取文件：通过e.dataTransfer.files可以直接拿到拖拽的文件列表，取第一个文件进行校验即可（适配单文件上传场景）。
2. 增强型校验：同时支持MIME类型和文件名后缀校验，避免部分浏览器或特殊文件无MIME类型的问题。
3. 状态重置：添加dragleave事件监听，确保拖拽离开上传区时隐藏错误提示，恢复初始状态。

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