drop事件不触发的根本原因是dragover未调用e.preventdefault()，必须在dragover中阻止默认行为才能激活drop，且drop中也需preventdefault；移动端兼容性差，需降级input；file.path不可用，仅name/size/type/lastmodified安全；大文件预览用url.createobjecturl；formdata上传多文件需同key多次append。
拖拽文件上传能用原生 HTML + JS 实现，但关键不在“能不能”，而在“drop 事件为什么总不触发”——90% 的失败都卡在没拦住浏览器默认行为。
为什么 drop 事件根本没执行？
不是代码写错了，是浏览器压根没把你的区域当“可投放目标”。dragover 事件里漏掉 e.preventDefault()，drop 就永远不会来，且不报错、不警告，静默失效。
-
dragover必须阻止默认行为，这是激活drop的开关，缺一不可 -
drop事件里也得调一次e.preventDefault()，否则部分浏览器（如 Safari）会尝试打开文件 - 别只监听
drop，更别只给dragenter加样式——视觉反馈是加分项，功能底线是dragover阻止默认 - 移动端 iOS Safari 直到 16.4 才支持
dataTransfer.files，Android Chrome 支持较好，但微信内置浏览器基本不认，必须保留<input type="file">降级
event.dataTransfer.files 能安全读哪些字段？
别碰 file.path，它在所有现代浏览器里都是空字符串或直接报错。这是沙箱强制限制，不是 bug。
- 可用字段只有：
file.name（含扩展名）、file.size（字节数）、file.type（MIME 类型，可能为空）、file.lastModified（时间戳） -
file.type可被轻易伪造（改后缀即可），仅作前端快速过滤，后端必须用二进制头检测真实类型 - 大文件（>100MB）别用
FileReader.readAsDataURL()预览，内存爆炸；改用URL.createObjectURL(file)创建临时引用，用完立刻URL.revokeObjectURL() - 遍历
files时用Array.from(files)或[...files]，避免直接对FileList调用数组方法
怎么用 FormData 正确上传多文件？
传单个文件和多个文件，后端接收方式可能完全不同——命名策略直接影响接口解析逻辑。
- 上传单个文件：
formData.append('file', file)，后端通常收为req.file或$_FILES['file'] - 上传多个文件：
formData.append('files', file)（同 key 多次 append），后端收到的是数组，如$_FILES['files']['name'][0] - 附带额外字段（如用户 ID、分类）：
formData.append('userId', '123')，和文件一起发，无需分两次请求 - 不要手动把
File转成Blob再 append，FormData原生支持File对象，转了反而丢元数据（如lastModified）
视觉反馈和边界容错怎么做才不翻车？
用户需要明确知道“现在可以松手了”，但高频触发的 dragover 里做 DOM 操作或计算，会卡顿拖拽体验。
-
dragenter和dragleave才是加/删高亮类名的正经位置，dragover只干一件事：e.preventDefault() - 边框变化用 CSS transition，别用 JS 动画；推荐
border: 2px dashed #007bff+background-color: #f8f9fa组合 - 拖拽区域的
cursor必须设为pointer或grab，纯文字提示无效 - drop 后立即清空
dataTransfer（虽然浏览器自动清理，但显式调e.dataTransfer.clearData()更稳妥），防止重复提交
最易忽略的一点：dragover 是高频事件（每几十毫秒触发一次），任何同步计算、DOM 查询、样式重排都会让拖拽卡顿——它只该做最轻量的事：阻止默认行为。其他所有逻辑，都该压到 drop 里统一处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
