HTML拖拽是否兼容文件上传_HTML拖拽与文件上传兼容方案【指南】

HTML拖拽上传需在dragenter和dragover中均调用preventDefault()以阻止浏览器默认行为，否则drop不触发；文件须从event.dataTransfer.files获取FileList，直接append至FormData，移动端不支持该方案。

HTML拖拽本身不兼容文件上传，必须手动阻止默认行为并接管文件读取逻辑，否则浏览器会直接打开或下载文件。

dragover 事件里不调用 event.preventDefault() 就根本没戏

浏览器对拖入文件有强默认行为：松手就打开 PDF、预览图片、下载压缩包。只要 dragover 里没写 event.preventDefault()，drop 事件压根不会触发——你连文件影子都摸不到。

• 只在 drop 里阻止默认行为是无效的，那时已经晚了
• 推荐同时监听 dragenter 和 dragover 并都调用 preventDefault()，尤其 Safari 对 dragenter 更敏感
• 别绑定到 document 全局，容易干扰其他拖拽组件（比如表格排序、画布元素移动）
• 目标容器必须有明确宽高和非 overflow: hidden 的父级，否则拖拽阴影不显示、松手无响应

event.dataTransfer.files 是唯一靠谱的文件来源

别碰 event.dataTransfer.items 或 types——items 在 Safari 里 getAsFile() 可能返回 null，types 只是 MIME 字符串列表，没法读内容。

• event.dataTransfer.files 返回标准 FileList，和 <input type="file"> 的 files 完全一致
• 但要注意：它不是深拷贝，跨窗口拖拽时可能为空，建议先判空：if (!files.length) return
• 每个 File 对象有 name、size、type，但 type 可被伪造，仅作前端体验校验，不能替代后端检查

FormData.append() 直接传 File 对象，别转 blob 或 base64

常见误区是用 FileReader 把 File 转成 base64 再塞进 FormData，这既浪费内存又拖慢上传——FormData.append() 原生支持 File 实例。

立即学习“前端免费学习笔记（深入）”；

• 单文件：formData.append('file', files[0])
• 多文件批量上传：for (const file of files) formData.append('files', file)
• 如果后端要求数组字段名如 files[0]，得手动拼字符串：formData.append(`files[${i}]`, file)，FormData 不自动解析方括号语法
• 发请求时别设 Content-Type 头，fetch 会自动生成带 boundary 的 multipart/form-data

移动端不支持原生拖拽，这个方案纯桌面端有效

所有主流移动浏览器（iOS Safari、Chrome for Android）都不触发 dragover/drop 事件。试图在手机上“拖文件进网页”只会失败。

• 不要给移动端加兜底逻辑（比如监听 touchstart 模拟拖拽），它违背交互直觉且不可靠
• 真要覆盖移动端，老实用 <input type="file"> + 样式隐藏 + 点击触发
• Electron 环境需额外确认 webPreferences.dragDrop 是否启用，否则整个 API 被禁用

真正卡住人的从来不是怎么写那几行 addEventListener，而是搞不清「浏览器拦在哪一步」「文件到底从哪来」「为什么松手没反应」——这些细节错一个，整个拖拽上传就静默失效。