必须在 dragover 和 drop 事件中均调用 event.preventDefault() 才能触发 drop，否则浏览器默认阻止投放；dragover 阶段未阻止则 drop 永不触发，且光标显示“禁止”符号。
拖拽区域怎么监听 dragover 和 drop 事件
浏览器默认会阻止 dragover 和 drop 的行为，所以不加处理的话，文件拖进来直接没反应，甚至变成“禁止”图标。关键是要在 dragover 里调用 event.preventDefault()，告诉浏览器“我要接管这个拖拽”。drop 里也得阻止默认行为，否则页面可能跳转或打开文件。
常见错误是只写了 drop 的处理却漏了 dragover，或者把 preventDefault() 写在了错误的回调层级里（比如写在异步函数里就晚了）。
实操建议：
- 给目标容器绑定
dragover和drop，两个事件都必须调用event.preventDefault()和event.stopPropagation() - 可选地在
dragenter和dragleave中加样式反馈（如高亮边框），但注意dragleave有冒泡陷阱，别误判离开 - 不要依赖
dragstart—— 它发生在源端，对目标区域无意义
如何从 event.dataTransfer 获取真实文件
event.dataTransfer.files 是核心入口，它返回一个 FileList 对象，类似数组但不是 Array。不能直接用 map 或展开运算符，得先转成数组再操作。另外，dataTransfer.items 虽然也能读，但它包含更多类型（比如条目可能是 entry 或文本），对纯文件上传反而更绕，优先用 files。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 用户拖入的是文件夹？
files里不会包含子文件，浏览器原生不支持递归读取（除非用webkitGetAsEntry，但已废弃且兼容性差） - 拖入了非文件项（比如网页文字、链接）？
files.length === 0，需提前判断并提示 - 多个文件同名？
File对象的name属性就是原始名，后端需自行处理冲突
简单提取示例：
const handleDrop = (e) => {
e.preventDefault();
const files = Array.from(e.dataTransfer.files); // 转成真数组
if (files.length === 0) return;
uploadFiles(files);
};
怎么用 fetch 原生上传而不依赖 FormData（可选）
其实不用 FormData 也能传，尤其当你只需要发单个 File 对象时：fetch 直接接受 File 作为 body，服务端收到的就是原始二进制流（Content-Type 自动设为 application/octet-stream）。但多数后端接口习惯接收 multipart/form-data，这时候还是得用 FormData。
使用 FormData 的要点：
- 每个
File必须用append('file', file)添加；如果传多个，可重复append，后端通过同名字段接收数组 - 不要手动设置
Content-Type头 ——fetch会自动加上带 boundary 的 multipart 头，手设反而会破坏格式 - 上传大文件时，
fetch没有原生进度事件，得靠XMLHttpRequest或ReadableStream分块读取（较复杂，普通场景不推荐）
为什么上传后服务端收不到文件？常见后端配合点
前端拖拽上传失败，十次有八次是后端没配好。重点不在 HTML 或 JS，而在服务端是否允许对应请求方法和头。
必须检查：
- CORS：确保后端响应头含
Access-Control-Allow-Origin，且Access-Control-Allow-Methods包含POST（或*） - 预检请求（OPTIONS）：如果前端带了自定义头（比如
Authorization），浏览器会先发 OPTIONS，后端必须正确响应，否则drop后静默失败 - Content-Type 匹配：前端用
FormData，后端框架（如 Express + multer、Django、Spring）要配置能解析multipart/form-data，别只写了 JSON 解析中间件
最简验证方式：用 curl -F "file=@test.txt" http://localhost:3000/upload 先测通接口，再回头调前端逻辑。
拖拽上传看着是前端活，但真正卡住的地方，往往在跨域策略、预检响应、后端 multipart 配置这三处——它们不报错，只让请求消失。
