拖拽上传需容器监听dragover/drop事件并调用preventDefault()，因input[type="file"]原生不支持拖拽；文件只能从e.dataTransfer.files读取，且iOS Safari需隐藏input降级。
直接用 <input type="file"> 无法实现拖拽上传——它只响应点击，不触发 drop 事件。所谓“拖拽上传”，本质是靠包裹它的容器监听 dragover 和 drop，再手动读取 e.dataTransfer.files。
为什么 <input type="file"> 自己不能拖拽
浏览器对 input[type="file"] 的原生行为仅限于点击唤起文件选择框。它不是可投放目标（drop target），即使设 draggable="true" 也无效。常见错误是把 input 套进 <label></label> 或加 CSS 美化后就以为能拖，结果只是点选逻辑被遮盖，拖入时浏览器仍会打开文件或显示禁止图标。
-
input元素本身不派发dragover/drop事件，绑定也无响应 - 试图给
input设ondrop或监听其files属性变化，永远拿不到拖入的文件 - 移动端 iOS Safari（截至 2026 年 9 月）完全不支持
dataTransfer.files，拖拽必失败，必须依赖隐藏input的点击降级
dragover 不调 preventDefault() 就等于没写
这是最常踩的坑：只绑了 drop 事件，却漏掉 dragover 的拦截。浏览器在文件悬停阶段高频触发 dragover，若未阻止默认行为，就会按原逻辑打开文件、跳转预览页，drop 根本不会触发，也不报错。
- 必须在
dragover回调里同步调用e.preventDefault()和e.stopPropagation() - 不能把
preventDefault()放在异步操作里（比如先 fetch 校验再阻止），它必须立即执行 - 如果容器有
overflow: auto或嵌套了contenteditable="true"、<button></button>等可聚焦子元素，事件可能被中途劫持，需确保冒泡到外层容器
从 drop 里正确读取文件的三个关键点
drop 事件中的文件不在 e.target.files，也不在隐藏的 input 上，而只存在于 e.dataTransfer.files。误用 document.getElementById('file-input').files 永远为空。
立即学习“前端免费学习笔记（深入）”；
- 直接用
Array.from(e.dataTransfer.files)转成数组，方便遍历处理 - 检查
files.length === 0：macOS Safari 拖入空文件夹时会返回空FileList，不校验会导致后续逻辑崩溃 - 别碰
e.dataTransfer.items：它可能混入文本、URL 等非文件项，过滤成本高且不可靠；files是纯文件列表，语义明确
隐藏 input 不是摆设，而是降级核心
移动端 iOS Safari 直到 16.4 才有限支持 dataTransfer.files，真机拖拽基本不可用。没有隐藏 input 的 change 事件兜底，用户在 iPhone 上就卡死。
-
<input type="file" multiple style="display: none;">必须保留，并绑定change事件 - 不要用
click()主动触发它来“模拟拖拽”——这会干扰用户真实操作，且 iOS 上可能被拦截 - 上传逻辑（如
FormData.append()、fetch）应复用同一套函数，参数统一接收File或FileList，避免两套代码维护
真正难的不是写几行事件监听，而是让拖拽和点击两条路径在各种边界下行为一致：空文件夹、超大文件、iOS Safari、滚动容器内拖入、含子元素的复杂 DOM 结构……这些地方不提前压测，上线后第一波投诉就来自真实用户的手指滑动轨迹。
