应在dragover阶段用e.dataTransfer.items遍历判断item.kind是否为'file'，而非依赖drop时的files；需结合size>0、后缀及type三重校验，且dragover和drop均须调用preventDefault()阻止默认行为。
dragover 里怎么提前知道拖进来的是文件还是链接？
不能等 drop 才判断——那时用户已经松手，体验断层。真正可靠的时机是 dragover，但必须结合 e.dataTransfer.items 检查 kind 字段。
常见错误是只看 e.dataTransfer.files.length > 0，这在 dragover 阶段不可靠（Safari 下常为 0），且无法区分拖入的是文件、网页链接还是纯文本。
-
e.dataTransfer.items在 dragover 中始终可用，items[i].kind === 'file'才代表真文件 - 如果所有 item 的
kind都是'string'或'text/plain'，基本就是拖了链接或文本 - 注意：Chrome/Firefox 下拖入本地文件夹时，
items可能为空或含伪条目；Safari 则可能返回 size=68 的“假文件”，需后续校验
drop 事件中如何安全确认文件有效性？
drop 是最终落地点，但 e.dataTransfer.files 仍是只读 FileList，直接遍历或调用 filter 会报错。
- 必须先转成数组：
Array.from(e.dataTransfer.files) - 逐个检查
file.size > 0，过滤掉 Safari 文件夹产生的 68 字节伪文件 - 检查
file.name是否含扩展名（伪文件通常无后缀），避免后续上传失败 - 不依赖
file.type做唯一判断——它可被伪造，仅作辅助；真正类型需后端用 magic number 校验
为什么拖进图片却触发页面跳转？
这不是 bug，是浏览器默认行为没被拦截。只要 dragover 没调 e.preventDefault()，drop 后浏览器就会尝试打开该文件 URI。
- 必须在
dragover和drop两个事件里都调用e.preventDefault() - 仅在
drop里阻止，dragover不处理 → 页面跳转或下载弹窗 - 监听对象要是实际拖拽容器（如
#drop-area），不是document或body（除非你真要全局响应） - 框架开发中，确保事件绑定到真实 DOM 节点，而非虚拟节点（Vue/React 的 ref 要正确指向 element）
accept 属性对拖拽有效吗？
无效。accept 只作用于 的文件选择器弹窗，对拖拽行为完全无约束。
拖拽场景下，一切文件类型都可能被拖入，前端必须自己做二次过滤：
- 按扩展名白名单过滤：
['.jpg', '.png', '.pdf'].includes(ext) - 按 MIME 类型前缀判断：
file.type.startsWith('image/') || file.type === 'application/pdf' - 限制单文件大小：
if (file.size > 50 * 1024 * 1024) - 记住：这些只是体验优化，绝不能替代后端的文件头检测和内容扫描
拖拽识别最易被忽略的点是「跨源拖拽状态持续性」——dragover 会高频触发，但 dragleave 并不总代表拖拽结束（比如拖到地址栏再拖回），真正退出窗口的判断得靠 e.relatedTarget === null。这个细节漏掉，hover 状态就容易卡死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
