drop事件不触发的根本原因是dragover未调用preventDefault()；必须在dragover监听器中无条件执行e.preventDefault()，且目标元素需有可交互尺寸，文件数据仅通过只读FileList对象e.dataTransfer.files获取。
drop 事件不触发？先确认 dragover 是否调用了 preventDefault()
文件拖拽上传的回调逻辑，本质就是 drop 事件能否被浏览器触发。而它有一个硬性前提：目标区域必须在 dragover 事件中调用 event.preventDefault()。没这句，drop 永远不会执行——浏览器直接按默认行为打开文件或忽略拖入。
常见错误现象：
- 拖文件到区域，鼠标变成“禁止”图标（圆圈加斜杠）
- 松手后毫无反应，控制台也无报错
-
drop事件监听器完全没被调用
实操建议：
- 确保
dragover监听函数里只有一行核心：e.preventDefault()，别漏写、别写在条件分支里 - 如果用
addEventListener绑定，不要混用内联属性（如ondragover="..."），避免覆盖或执行顺序混乱 - 目标元素要有可交互尺寸（比如
min-height: 50px或padding: 20px），空div默认高度为 0，物理上“拖不进去”
dataTransfer.files 是唯一可靠的数据入口
成功触发 drop 后，文件信息只通过 e.dataTransfer.files 暴露，这是一个只读的 FileList 对象，不是数组。别试图用 Array.from() 或扩展运算符直接遍历——虽能用，但容易忽略它不响应 length 变化、不能 push 等限制。
使用场景：
- 单文件上传：取
e.dataTransfer.files[0] - 多文件上传：用
for (let i = 0; i 安全遍历 - 校验类型/大小：检查
file.type（如"image/png"）和file.size（单位字节）
注意点：
-
e.dataTransfer.getData("text/plain")对文件无效，返回空字符串——这是文本拖放的通道，和文件无关 - 不要依赖
e.dataTransfer.items，它在部分 Safari 版本中行为不稳定，files更兼容 - 拖拽文件夹时，
files只包含顶层文件，不递归子项（HTML5 标准不支持文件夹递归读取）
阻止默认行为必须在 drop 和 dragover 中都写
drop 事件里同样要写 e.preventDefault()，否则浏览器可能尝试以新标签页打开文件（尤其是图片、PDF、文本类文件），导致页面跳转或弹窗干扰你的回调逻辑。
性能与兼容性影响：
- Chrome、Firefox、Edge 全支持；Safari macOS 基本可用，但 iOS Safari 不支持文件拖拽（仅支持链接/文本）
- 移动端完全不可用——这不是 bug，是规范限制，别在响应式项目里给 touch 设备留这个逻辑分支
- 防止重复触发：可在
drop回调开头加防抖，比如用setTimeout延迟 100ms，避免快速连续拖入引发多次处理
文件读取和上传需分两步，别卡在回调里
拿到 FileList 只是开始。drop 回调本身应轻量，只做校验、预览准备或触发上传流程，别直接同步读取大文件（如用 FileReader.readAsDataURL() 读 100MB 视频），否则界面会卡死。
实操建议：
- 预览小图：对
file.type.startsWith("image/")的文件，用FileReader异步转成data:URL - 上传大文件：构造
FormData，append 文件后用fetch或XMLHttpRequest发送，监听upload.onprogress - 错误处理：捕获
FileReader.onerror或fetch.catch，别让一个失败文件阻塞整个回调链
最容易被忽略的是：拖拽区域没有视觉反馈。用户不知道自己是否拖对了位置——加 dragenter/dragleave 切换 class 来高亮边框，比写一百行逻辑更影响实际体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
