拖拽上传按钮无响应是因为未完整监听dragover、dragleave和drop事件，其中dragover必须调用event.preventDefault()，否则drop事件永不触发；常见错误是仅绑定drop而遗漏dragover。
拖拽上传按钮为什么没响应？检查 dropzone 元素的事件监听是否完整
拖拽上传不是加个 input[type="file"] 就能用的，必须手动绑定 dragover、dragleave 和 drop 三个事件，否则浏览器会按默认行为处理（比如打开文件、跳转链接），根本不会触发上传逻辑。
常见错误是只写了 drop，漏掉 dragover —— 而这个事件必须调用 event.preventDefault()，否则 drop 永远不会触发。
-
dragover：必须阻止默认行为，且建议设置event.dataTransfer.dropEffect = "copy" -
dragleave：用于移除高亮样式，注意它会在子元素间频繁触发，要用event.relatedTarget判断是否真离开了容器 -
drop：同样要preventDefault()，再从event.dataTransfer.files取文件列表
如何让按钮支持点击选择 + 拖拽上传双模式？用隐藏 input + label 触发
直接操作 input[type="file"] 不可控，推荐用 label 关联隐藏的 input，再把拖拽区域和 label 合并为同一块 DOM：
<div id="dropzone" class="drop-area"> <label for="file-input">拖拽文件到这里，或<span>点击选择</span></label> <input type="file" id="file-input" multiple style="display:none"> </div>
这样点击文字或区域都会触发文件选择框；同时 dropzone 的事件监听仍可捕获拖拽文件。注意：for 和 id 必须严格匹配，且 input 不能用 visibility: hidden 或 opacity: 0，否则部分浏览器（如 Safari）无法触发点击。
立即学习“前端免费学习笔记（深入）”；
FileList 对象怎么读取？别直接遍历 event.target.files
拖拽进来的文件在 event.dataTransfer.files 中，不是 event.target.files —— 后者只对点击 input 有效。而且 FileList 是只读类数组，不支持 map、forEach 等方法。
- 正确读取方式：
Array.from(event.dataTransfer.files)或[...event.dataTransfer.files] - 每个
File对象有name、size、type、lastModified，但没有路径（出于安全限制） - 如果需要预览图片，用
FileReader的readAsDataURL，别试图用URL.createObjectURL后又忘记revoke，否则内存泄漏
上传前校验失败怎么办？drop 事件里不能靠 alert 阻断
用户拖入了超大文件或不支持类型，你弹个 alert 并不能阻止上传流程继续——因为 drop 事件已经结束，后续逻辑可能已开始执行。真正有效的做法是：在 drop 回调中同步判断，不符合就立刻返回，不调用上传函数，并给出视觉反馈（比如抖动容器、变红边框）。
示例校验逻辑：
const files = Array.from(event.dataTransfer.files);
const validFiles = files.filter(file => {
if (file.size > 5 * 1024 * 1024) {
showWarning("单个文件不能超过 5MB");
return false;
}
if (!/^(image\/|text\/|application\/pdf)$/.test(file.type)) {
showWarning("仅支持图片、文本或 PDF");
return false;
}
return true;
});记住：校验必须在 drop 事件内完成，不要异步延迟判断，否则用户拖完就以为成功了。
边界情况容易被忽略：多个文件拖入时，dataTransfer.items 可能包含目录（webkitGetAsEntry），但现代 Chrome/Firefox 已基本不暴露目录结构；IE 完全不支持拖拽上传，得降级为传统表单提交。
