拖拽上传需三事件共存且dragover中必须preventDefault()，否则drop不触发；FileList需转数组再遍历；多文件上传依后端命名；iOS Safari不支持dragover需降级；状态需手动重置。
拖拽上传不是加个 draggable="true" 就能用的，核心卡点在 dragover 里漏掉 preventDefault() —— 这会导致 drop 根本不触发，文件直接被浏览器打开或下载。
为什么 drop 事件死活不执行？
这不是代码写错了，是浏览器根本没把你当“可投放目标”。dragover 事件里没调 event.preventDefault()，浏览器就默认走原生逻辑：图片预览、PDF 打开、文本粘贴……你连 drop 的边都碰不到。
-
dragenter和drop里也得调preventDefault()，但关键防线在dragover -
dragover高频触发（每 30–50ms 一次），别在里面做FileReader或 DOM 更新，会卡顿 - 只监听
drop是不够的；必须三者共存：dragenter→dragover→drop
怎么安全读取 dataTransfer.files？
e.dataTransfer.files 是只读的 FileList，不是数组。直接写 files.forEach() 会报 TypeError: files.forEach is not a function。
- 正确转数组方式只有两种：
Array.from(files)（推荐，兼容所有现代浏览器）或[...files]（ES6+） - 别用
Array.prototype.slice.call(files)，冗长且容易拼错 - 别误以为隐藏的
<input type="file">的files属性有值——它永远为空，除非用户真点了那个 input - 校验类型建议用
file.type.startsWith('image/')而非硬匹配，兼容 WebP、AVIF 等新格式
上传时 FormData 怎么 append 多文件？
后端接收方式决定前端命名策略。常见错误是统一用 append('file', file)，结果后端只收到最后一个。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 如果后端期望数组形式（如 PHP 的
$_FILES['files']），用formData.append('files[]', file) - 如果后端按字段名区分（如 Node.js Koa 的
ctx.request.files.file1），可用formData.append('file1', file)动态命名 - 不要手动设
Content-Type头：fetch或XMLHttpRequest发送FormData时会自动加multipart/form-data; boundary=...，手设反而导致 400 - 大文件（>10MB）建议加
file.size 前置拦截，避免上传中途失败
移动端和降级方案绕不开
iOS / iPadOS Safari 至今（2026 年）仍不支持 dragover 和 dragenter，这不是 bug，是明确平台限制。PC 上测得再稳，真机一拖就失效。
- 必须给拖拽容器加
tabindex="0"，让它可聚焦 - 监听
click或keydown（空格/回车），然后触发隐藏<input type="file">的.click() - 别把
<input>套在<button></button>里，会劫持事件冒泡；也别依赖contenteditable="true" - 视觉反馈要一致：拖入时加
highlight类，dragleave里删掉，否则用户松手后还高亮着，体验断裂
最常被忽略的是：拖完一次后，dataTransfer 不会自动清空，重复 drop 可能提交旧文件；drop 处理完最好显式重置状态，比如清空预览区、重置高亮类、清空临时变量。
