drop事件不触发的根本原因是dragover未调用e.preventDefault()；必须在dragover中同步阻止默认行为，否则浏览器拒绝投放，drop永远不会执行。
drop 事件不触发？八成是 dragover 没调 event.preventDefault()。这不是可选项，是浏览器硬性要求：不“开门”，文件根本进不来。
dragover 必须阻止默认行为，否则 drop 失效
浏览器把未拦截的 dragover 当作“拒绝接收”，光标变禁止符号，松手后可能跳转到文件地址或直接打开——drop 根本不会执行。
- 只监听
drop而忽略dragover是最常见错误 -
dragover回调里只需一行：e.preventDefault()，别加耗时逻辑（它每毫秒都可能触发） - 部分 Safari 版本还要求同步设
e.dataTransfer.dropEffect = 'copy' - 别绑定到
document或body，除非你真要全局拖拽；优先用明确容器，比如document.getElementById('dropzone')
drop 里怎么安全读取文件列表
event.dataTransfer.files 是只读类数组，不能直接用 .map() 或展开运算符；且跨浏览器兼容性差，某些场景下为空。
- 务必先转成真数组：
Array.from(e.dataTransfer.files)或[...e.dataTransfer.files] - 更健壮的写法是优先尝试
e.dataTransfer.items：Array.from(e.dataTransfer.items).map(item => item.getAsFile()).filter(Boolean) - 每个
File对象能安全访问的属性只有：name、size、type、lastModified；file.path在所有现代浏览器中都是空字符串或报错 - 校验
type别写死：file.type === 'image/jpeg'会漏掉png，改用file.type.startsWith('image/')
dropzone 样式要让用户一眼看出“能拖”
纯功能正确不够，用户得感知这是个可交互区域。关键不是动画，而是基础视觉信号。
立即学习“前端免费学习笔记（深入）”；
- 必须设
cursor: pointer或cursor: grab，鼠标悬停时有反馈 - 拖入时靠
dragenter/dragleave切换 class（如.highlight），配合outline或border-color变化 - 避免用
background-image或复杂渐变遮盖拖拽状态变化，简单 border + padding + text 提示最可靠 - 移动端 iOS Safari 直至 16.4 才有限支持
dataTransfer.files，需降级为点击<input type="file">
真正难的不是让 drop 触发，而是确保从「用户松手」到「文件对象可用」再到「上传请求发出」这三步之间，没有因作用域、内存引用或事件冒泡导致的状态断裂。尤其是反复拖拽时，URL.createObjectURL() 不手动 revoke，几轮下来内存就明显上涨。
