拖拽文件进浏览器不触发drop是因为dragover未调用e.preventDefault()，导致默认行为（下载/预览）屏蔽drop；必须在dragover和drop中均调用preventDefault()才能获取文件。
为什么拖拽文件进浏览器会直接下载而不是触发 drop？
因为浏览器对拖入文件有强默认行为：松手就打开 PDF、预览图片、下载压缩包。只要 dragover 事件里没调 e.preventDefault()，drop 根本不会触发——你连文件影子都摸不到。
常见错误现象包括：drop 事件监听写了但完全不执行；控制台无报错，页面却跳转或弹出下载框；移动端拖拽毫无反应（iOS Safari 默认禁用原生 drag 事件）。
-
dragover是“允许放置”的唯一入口，不阻止默认行为，drop就被静默屏蔽 - 只在
drop里调preventDefault()是无效的，那时已经晚了 -
dragenter可用于加悬停样式，但不是必需；dragleave容易误触发（尤其在子元素间），初学者建议先忽略
如何正确拦截并拿到拖进来的文件？
必须在目标容器（比如 <div class="drop-area">）上同时处理两个事件，并且顺序和写法都不能错：<ul>
<li>
<code>dragover 回调中必须调 e.preventDefault()，且不能有异步延迟或条件判断——它要每毫秒都响应
drop 回调中也要调 e.preventDefault()，再从 e.dataTransfer.files 取 FileList
<form></form> 本身——它不接收拖拽，得用子容器承接File 对象，不是 <input type="file"> 的 value，不能靠模拟表单提交示例代码片段：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragover', e => {
e.preventDefault(); // 必须
});
dropArea.addEventListener('drop', e => {
e.preventDefault(); // 必须
const files = e.dataTransfer.files; // 真实文件列表
handleFiles(files);
});移动端拖拽上传为什么总是失败？
iOS Safari 和 Android Chrome 基本不触发 dragstart/drop 等事件，原生拖拽在移动端不可用。这不是你代码的问题，是平台限制。
- 不要试图用
draggable="true"+ 事件监听在手机上实现文件拖放 - 必须降级为触摸事件模拟：监听
touchstart/touchmove/touchend，手动构造文件选择逻辑 - 更现实的做法是：移动端隐藏拖拽区，只显示
<input type="file">按钮，用accept和multiple控制类型与数量 - 若真需“拖拽感”，可用第三方库如
interact.js或SortableJS的触摸适配模式，但它们不解决文件拖入问题
服务端收不到文件？中间层可能悄悄拦了
前端看似发了请求，后端却收不到 files 字段，大概率卡在中间某层做了过滤或限制：
- Nginx 默认
client_max_body_size是 1MB，拖拽常含大文件，需显式调大（如20m） - Express + multer 需配置
limits: { fileSize: 20 * 1024 * 1024 }，否则静默丢弃超限文件 - Flask 的
MAX_CONTENT_LENGTH默认 512KB，不改就只能传小图 - 浏览器 Network 标签页里看请求 payload 是否真有二进制内容；若为空，问题在前端构造
FormData阶段
真正容易被忽略的是：Nginx 的 add_header 必须带 always 参数才能覆盖默认的 text/html 类型，否则即使你写了 Content-Type: multipart/form-data，它也会被重写。
