拖放上传需同时处理dragover和drop事件并阻止默认行为，正确读取DataTransfer中的文件，区分items与files，用FileReader配合分片处理大文件，通过FormData安全上传，并注意移动端降级及边界情况处理。
JavaScript 实现拖放上传，核心不是“加个 dragover 就能用”，而是得拦住浏览器默认行为、正确读取 DataTransfer、区分文件与非文件项，并处理好大文件分片或取消的边界情况。
为什么 drop 事件拿不到文件？
常见错误是只监听 drop，却没阻止 dragover 的默认行为——浏览器会直接打开文件或跳转，根本不会触发 drop。
必须同时处理两个事件：
-
dragover中调用e.preventDefault()（仅此一项就足够让drop触发） -
drop中再次e.preventDefault()，再从e.dataTransfer.files取文件
注意：e.dataTransfer.items 和 .files 行为不同：.items 可包含目录（需递归读取），.files 是扁平的 FileList，多数场景用后者更稳。
立即学习“Java免费学习笔记（深入）”；
FileReader 读取失败的三个典型原因
不是所有文件都能直接 readAsDataURL，尤其大文件或受限环境：
- 内存溢出：读取几百 MB 文件时，
readAsDataURL会生成超长 base64 字符串，可能卡死页面；改用readAsArrayBuffer+ 分片上传 - 跨域限制：如果页面是
file://协议，部分浏览器禁止FileReader（Safari 尤其严格） - 读取中断：用户在读取中刷新页面，
onloadend不一定触发，应监听onerror和onabort
示例判断：
const reader = new FileReader();
reader.onload = () => console.log(reader.result.slice(0, 50));
reader.onerror = () => console.error('读取失败:', reader.error?.name);
reader.readAsArrayBuffer(file); // 比 readAsDataURL 更可控
如何安全地把文件传给后端？
别直接把 File 对象塞进 fetch body——它支持，但容易忽略关键细节：
- 用
FormData包裹，字段名必须和后端约定一致，例如formData.append('upload', file) - 避免手动设置
Content-Type：FormData会自动生成带 boundary 的 multipart，设错反而导致 400 - 大文件建议加进度监听：
upload.onprogress（XMLHttpRequest）或用ReadableStream+fetch流式上传（较新 API） - 后端接收时注意：Node.js 的
express默认不解析 multipart，需multer；Python Flask 要检查request.files是否为空
拖放区域被遮挡或失效怎么办？
视觉上看着是拖放区，实际没响应，往往因为：
- CSS 设置了
pointer-events: none（比如为了透出背景图） - 父容器有
overflow: hidden且拖拽起点在区域外，某些浏览器会截断事件流 - 区域高度为 0：空
div没内容也没高度，dragover压根不会进入——加min-height: 100px或padding - 移动端不支持原生
drag/drop（iOS Safari 全面禁用），必须降级为点击选择<input type="file">
检测是否支持的最小验证：
if ('draggable' in document.createElement('span')) {
// 可以用原生 drag/drop
} else {
// 强制显示 file input
}
真正难的不是写通拖放，而是当用户拖入 2GB 视频、中途关掉标签页、网络突然中断时，你的代码还知道该停在哪一步、报什么错、要不要重试——这些逻辑不在教程里，但在生产环境里天天发生。
