drop事件不触发的根本原因是未在dragover中调用event.preventDefault()；必须同时监听dragover和drop并阻止默认行为，否则浏览器拒绝投放且直接打开文件。
dropzone 事件监听必须阻止默认行为，否则会跳转到文件页面
浏览器对拖拽文件到页面有默认处理：直接打开或下载。不阻止 dragover 和 drop 的默认行为，drop 事件根本不会触发文件读取逻辑。
常见错误是只加了 ondrop 但没处理 ondragover，或者忘了调用 e.preventDefault()：
element.ondragover = e => e.preventDefault(); // 必须
element.ondrop = e => {
e.preventDefault(); // 必须
const files = e.dataTransfer.files; // 才能拿到 FileList
// …后续处理
};
-
dragenter可选监听，仅用于视觉反馈（如高亮区域），但不阻止它不影响功能 -
dragleave建议监听并移除高亮，避免鼠标划出时状态残留 - 若区域含子元素（如图标、文字），需确保事件冒泡到容器，或给子元素也加
pointer-events: none
FileReader 读取大文件容易卡顿，优先用 FileReader.readAsArrayBuffer
用 readAsDataURL 读取几 MB 以上文件，会生成超长 base64 字符串，导致内存暴涨、UI 卡死甚至崩溃。上传前不需要预览缩略图的话，应跳过该步骤。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 上传纯二进制数据时，直接用
readAsArrayBuffer，之后可转为Uint8Array或构造FormData - 需要校验文件类型或尺寸？用
file.type和file.size（同步获取，无需读取） - 真要预览图片？限制宽度/高度，用
URL.createObjectURL(file)替代 base64（更省内存，且可revokeObjectURL清理）
示例片段：
const reader = new FileReader();
reader.onload = e => {
const arrayBuffer = e.target.result;
const formData = new FormData();
formData.append('file', new Blob([arrayBuffer], { type: file.type }), file.name);
// 后续 fetch 上传…
};
reader.readAsArrayBuffer(file); // 不要用 readAsDataURL
FormData.append 传入 Blob 或 File 时，后端接收名必须匹配
前端用 formData.append('upload', file)，后端框架（如 Express、Django、Spring Boot）必须按字段名 upload 解析 multipart 数据。名字不一致会导致 req.files 或 request.FILES 为空。
其他关键点：
- fetch 上传时不要手动设
Content-Type头——浏览器会自动生成带正确 boundary 的multipart/form-data；设了反而会失败 - Node.js 后端若用
multer，需配置single('upload')对应字段名 - 上传多个文件？用
formData.append('files', file1)、formData.append('files', file2)，后端接收为数组（如multer.array('files')）
移动端 Safari 对 drag & drop 支持极弱，必须降级为点击选择
iOS Safari 完全不支持 dragover/drop 事件，Android Chrome 虽支持但体验差（常无法触发 drop）。强行依赖拖拽会导致大量用户无法上传。
稳妥方案是「拖拽区 + 隐藏 file input」双通道：
- 拖拽区域始终存在，桌面端走 drag/drop 流程
- 同时放一个
<input type="file" id="file-input" style="display:none"> - 拖拽区点击时触发
fileInput.click() - 监听
fileInput.onchange统一处理文件列表，与拖拽逻辑复用
这样既保留桌面端的交互优势，又兜住所有移动端场景。别幻想用第三方库绕过这个限制——底层 API 就不存在。
边界情况：iOS 上 input[type=file] 默认只能选照片/视频，若需文档，得加 accept=".pdf,.docx" 并确认系统支持；否则 fallback 到提示“请使用桌面浏览器”更诚实。
