拖拽文件时 files.length 为 0 是因未阻止浏览器默认行为，需在 dragover 和 drop 事件中均调用 event.preventDefault()；限制文件数需手动截取数组，单选靠逻辑判断，移动端支持差，服务端校验不可省。
拖拽文件时 files.length 为什么总是 0？
因为没阻止浏览器默认行为。dragover 和 drop 事件必须显式调用 event.preventDefault()，否则 event.dataTransfer.files 就是空的——这不是 bug，是浏览器安全策略。
常见错误写法：
dropZone.addEventListener('drop', e => {<br> console.log(e.dataTransfer.files.length); // 总是 0<br>});
正确做法：
- 给目标区域绑定
dragover事件，并在回调里执行e.preventDefault() - 再绑定
drop事件，同样要e.preventDefault() - 此时才能安全读取
e.dataTransfer.files
如何限制拖入文件总数（比如最多 5 个）？
不能靠 multiple 属性——它只对 <input type="file"> 有效，对拖放完全无效。拖入多少个，全由用户操作决定，前端必须手动截断。
实操建议：
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 拿到
e.dataTransfer.files后，立即转成数组：const files = Array.from(e.dataTransfer.files) - 用
slice(0, 5)取前 5 个，丢弃超量部分（不要用alert清空再重选，体验差） - 合并已有文件列表（如果支持多次拖入），并用
name + size + lastModified做简易去重，避免重复计入 - 实时更新 UI 显示 “已选
currentList.length/5”，超限时禁用上传按钮
单选 vs 多选：怎么让拖放只接受一个文件？
没有原生属性控制拖放单双选，只能靠逻辑拦截。
关键判断点：
- 检查
e.dataTransfer.files.length !== 1就直接 return - 别只看数量，还要校验是否为文件（
e.dataTransfer.items可能包含非文件项，比如网页链接） - 移动端基本不支持拖放，iOS Safari 直到 16.4 才有有限支持，Android 则因厂商定制差异大，别依赖
- 如果业务真需要强单选，优先用
<input type="file">+change事件，比拖放更可控
为什么服务端二次校验不可跳过？
前端限制可被绕过：用户禁用 JS、手动构造 FormData、用 curl 或 Postman 直传，都会让数量控制失效。
服务端必须做两件事：
- 解析上传字段时，明确限制文件数组长度（例如 Node.js 的
multer配置limits.files） - 对每个文件再校验
size和type，不能只信前端传来的Content-Type - 返回清晰错误码（如
400 Too Many Files），前端据此提示用户而非报错崩溃
最容易被忽略的是：拖放和 <input multiple> 是两套独立流程，它们的文件来源、触发时机、校验点都不同，但最终都要落到同一份后端规则上——漏掉任一路径，限制就形同虚设。
