需阻止dragover和drop默认行为，绑定事件并调用preventdefault()，用datatransfer.files构造formdata发送；服务端需调大请求体限制，如nginx的client_max_body_size。
HTML 表单怎么让拖拽区域响应 drop 事件
默认情况下，<form></form> 或任意容器对 drop 事件无响应——浏览器会直接拦截并打开文件，而不是交给你处理。必须显式阻止 dragover 和 drop 的默认行为，否则拖拽一松手就跳转或下载。
- 给目标容器（比如
<div class="drop-area">）绑定 <code>dragover和drop事件 -
dragover里必须调用event.preventDefault()，否则drop根本不会触发 -
drop事件的event.dataTransfer.files才是真正要上传的FileList - 别监听
<form></form>本身——它不接收拖拽，得用子容器承接 - 遍历
event.dataTransfer.files，逐个append到FormData实例里，键名要和后端约定一致（比如"files"） - 如果后端要求单文件字段名带索引（如
"files[0]"），就得手动拼字符串，FormData不自动处理数组语法 - 不用设
Content-Type头——fetch会自动生成带 boundary 的multipart/form-data - 注意：
File对象可直接传入append()，不需要读取为 blob 或 base64 - Nginx 默认限制单次请求体大小（
client_max_body_size），拖拽常含大文件，需显式调大（如20m） - Node.js 的
express+multer需配置limits: { fileSize: 20 * 1024 * 1024 }，否则静默丢弃超限文件 - Python Flask 的
MAX_CONTENT_LENGTH默认 512KB，不改就只能传小图 - 浏览器控制台 Network 标签页里看请求 payload 是否真有二进制内容；若为空，问题在前端构造
FormData阶段 - 监听
dragenter和dragleave，注意dragleave会在子元素间误触发，得用event.relatedTarget过滤 - 更稳妥做法：只在
dragenter加 class，在drop或dragend清除，避免悬停状态残留 - 别用
dragover频繁 toggle class——它每毫秒触发多次，容易卡顿 - 示例 class 名建议用语义化命名，如
is-drag-over，方便 CSS 控制边框/背景变化
如何把拖进来的文件塞进 FormData 并发给后端
拖拽得到的是 File 对象，不是 <input type="file"> 的 value 值，不能靠模拟表单提交。得手动构造 FormData，再用 fetch 或 XMLHttpRequest 发送。
为什么拖拽上传后端收不到文件？常见拦截点
前端看似发了，后端却收不到 files 字段，大概率卡在中间某层做了过滤或限制。
拖拽区域样式怎么判断“正在悬停”状态
仅靠 CSS 的 :hover 不够——拖拽时鼠标在元素上方但未释放，需要 JS 动态加 class。
立即学习“前端免费学习笔记（深入）”；
拖拽上传看着简单，真正卡住的地方往往不在 JS 逻辑，而在服务端配置、边界条件判断（比如空文件、目录拖入）、以及浏览器对 dragover 的隐式拦截规则——这些地方没显式处理，整个流程就静默失败。
