拖拽上传真正有效的事件是dragover（必须调用preventDefault）、drop（获取files）和可选dragenter（视觉反馈）；漏掉dragover的preventDefault会导致drop不触发，且三者须绑定在同一容器上。
拖拽区域监听哪些事件才真正有效
拖拽上传不是靠 dragstart 或 drop 单独就能跑通的——浏览器默认会阻止表单区域的拖拽行为，必须显式调用 preventDefault()。关键事件链是：dragover（必须拦截）、drop（获取文件）、dragenter（可选，用于视觉反馈）。漏掉 dragover 的 preventDefault()，整个拖拽会直接失效，连 drop 都不会触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
dragover和drop必须绑定在同一容器上，且两者都要调用e.preventDefault() - 别在
body或document上监听drop—— 会收不到文件，因为事件路径中表单元素可能已拦截或冒泡中断 - 如果用了
label包裹input[type="file"]，注意label默认不响应拖拽，得手动加dragover监听
如何从 drop 事件里安全提取文件列表
event.dataTransfer.files 是唯一可靠来源，event.dataTransfer.items 虽支持目录读取，但兼容性差（Safari 不支持 webkitGetAsEntry），且容易返回空 FileList。别试图用 event.target.files——那是 input 元素的值，和拖拽无关。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终用
Array.from(e.dataTransfer.files)转成数组，避免直接遍历FileList（它不是真数组，部分方法不可用） - 检查
files.length === 0，某些系统（如 macOS Finder 拖文件夹）可能传空列表而不报错 - 过滤掉非文件项：有些浏览器会把文本、URL 也塞进
dataTransfer.items，但files只含File对象，更干净
怎么让拖拽区样式随状态实时变化
仅靠 CSS 的 :hover 不够——拖拽过程中用户光标没悬停，只是“携带文件经过”，必须用 JS 控制类名。核心是利用 dragenter 和 dragleave，但要注意 dragleave 会在子元素间误触发。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
dragenter添加高亮类（如is-dragover），用dragleave移除——但需节流或判断是否真的离开了容器边界 - 更稳的做法：只监听
dragenter和dragover，并在drop或dragend后清除状态，避免残留 - 禁用
pointer-events: none在拖拽区内部元素上，否则dragleave会异常触发
上传前校验文件类型和大小的实际写法
前端校验不能替代后端，但能立刻反馈错误，避免无效请求。重点不是正则匹配后缀名（file.name 可伪造），而是看 file.type 和 file.size。比如 image/jpeg 类型比 .jpg 后缀靠谱得多，但注意某些 PNG 文件可能报 type 为空字符串。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 多类型校验用数组包含：
['image/jpeg', 'image/png', 'image/gif'].includes(file.type) - 大小限制用字节比 KB 更准：
if (file.size > 5 * 1024 * 1024)（5MB），别用file.size > 5242880这种硬数字，难维护 - 遇到
file.type === ''时，可 fallback 到file.name.split('.').pop().toLowerCase()做辅助判断，但仅作提示，不阻断
拖拽上传真正的复杂点不在事件绑定，而在于边界情况处理：跨 iframe 拖拽失败、粘贴板图片转 File、移动端长按误触发。这些场景下 dataTransfer.files 可能为空或结构异常，得预留 fallback 路径——比如同时保留传统 file input 作为备选入口。
