dragover 不触发 drop 的根本原因是未在 dragover 事件中调用 e.preventDefault()，浏览器默认阻止投放；必须同时监听 dragover 和 drop 并均调用 preventDefault()，子元素需加 pointer-events: none 确保事件冒泡，文件上传无需设置 draggable="true"。
dragover 不触发 drop 的根本原因
drop 事件压根不执行，90% 是因为 dragover 里没调用 e.preventDefault()。浏览器默认把文件拖进页面当成“打开文件”或“下载”，不是上传——你得明确告诉它“这里允许投放”，否则连 drop 都不会派发。
常见错误写法：dropZone.addEventListener('drop', handler) 单独加了，但漏掉 dragover 监听，或者监听了却忘了 preventDefault()。
- 必须同时监听
dragover和drop，且两者都要调用e.preventDefault() -
dragenter和dragleave可选，只用于视觉反馈（比如加 class 高亮），不影响功能逻辑 - 如果 drop 区域内有子元素（如
<p>或图标），它们会拦截事件；解决方法是给子元素加pointer-events: none，确保事件冒泡到容器
draggable="true" 在文件上传中其实不需要
用户拖的是本地文件系统里的文件，不是网页上的某个 <div>。所以你不需要给任何 HTML 元素设 draggable="true" ——那是用来拖网页内元素的（比如排序列表），和文件上传无关。
真正起作用的是浏览器对 OS 文件的原生支持：只要监听好目标区域的 dragover/drop，就能拿到 e.dataTransfer.files。
立即学习“前端免费学习笔记（深入）”；
- 设了
draggable="true"不报错，但纯属冗余，还会误导自己以为“要从页面拖东西出来” - 想让用户也能从页面里拖图片/文本进上传区？那才需要
dragstart+dataTransfer.setData()，但和文件上传是两套逻辑 - 文件上传场景下，
e.dataTransfer.files是只读的FileList，不能增删，只能遍历处理
多文件上传必须用异步队列，别直接 forEach + fetch
直接 Array.from(files).forEach(file => upload(file)) 看似简单，但并发太多会触发浏览器连接数限制、后端限流，甚至导致部分请求被静默丢弃。尤其在用户一次拖入 20+ 个文件时，必须控速。
推荐用 Promise 队列，每次只并发 3–5 个请求，其余排队等空闲 slot：
function uploadQueue(files, maxConcurrency = 3) {
const queue = Array.from(files);
const results = [];
let active = 0;
return new Promise((resolve) => {
function next() {
if (queue.length === 0 && active === 0) return resolve(results);
if (active >= maxConcurrency || queue.length === 0) return;
active++;
const file = queue.shift();
uploadOne(file).then(res => {
results.push({ file: file.name, success: true, ...res });
}).catch(err => {
results.push({ file: file.name, success: false, error: err.message });
}).finally(() => {
active--;
next();
});
}
while (active < maxConcurrency && queue.length) next();
});
}
-
uploadOne(file)内部用FileReader.readAsArrayBuffer(file)，别用readAsDataURL，避免大文件生成超长 base64 崩 UI - 上传前校验文件类型/大小，直接读
file.type和file.size（同步，无需 FileReader） - 后端接收字段名（如
formData.append('files', file)）必须和接口约定一致，否则 multipart 解析失败
drop 区域样式与兼容性细节
视觉反馈做不好，用户根本不知道“能不能拖”“拖进去没”。但光靠 CSS :hover 不够，得靠事件驱动状态变化。
-
dragenter触发时加高亮类（如dropZone.classList.add('drag-over')），dragleave移除——注意：鼠标快速划过子元素可能触发多次dragleave/dragenter，建议加防抖或用event.relatedTarget判断是否真离开容器 - IE11 不支持
dataTransfer.files，但已基本淘汰；Safari 对dragover的preventDefault()要求更严格，务必确保监听器绑定在正确节点上 - 移动端不支持文件拖拽（iOS/Android 浏览器无此 API），必须降级为点击
<input type="file">，别指望拖拽能覆盖全平台
最易被忽略的一点：drop 事件里拿到的 e.dataTransfer.files 是实时快照，不是引用。如果你在上传中途修改了文件数组（比如 filter 掉某些文件），别试图改 files 本身——它不可写，只能自己建新数组过滤。
