Drag API 文件拖拽上传需按 dragenter→dragover→drop→dragleave 事件流处理，dragover 必须调用 preventDefault()，Safari 更严格；文件须从 event.dataTransfer.files 获取并校验长度；上传用 FormData + fetch，注意 Safari 进度事件兼容性及安卓 WebView 的 dataTransfer.items 支持问题；需添加视觉反馈、加载状态、错误提示和文件大小/数量限制。
理解 Drag API 的核心事件流
文件拖拽上传不是简单监听 drop 事件就完事。整个链路依赖四个关键事件：dragenter、dragover、drop 和（可选）dragleave。其中 dragover 必须调用 event.preventDefault()，否则浏览器会执行默认行为（如打开文件），导致 drop 无法触发。这个细节在 Chrome、Firefox、Edge 中一致，但 Safari 对 dragover 的处理更严格，漏掉 preventDefault 就会失败。
正确读取拖入的文件对象
在 drop 事件中，不能直接从 event.target.files 获取文件——那是表单 input 的行为。必须通过 event.dataTransfer.files 访问，它返回一个 FileList 对象。注意：FileList 是只读类数组，不支持 map/filter，可用 Array.from() 转为数组再处理。同时建议校验 files.length > 0，避免空拖拽误触发。
构建兼容的上传请求
现代浏览器都支持 FormData + fetch，无需 jQuery 或 iframe 降级。将每个 File 实例 append 到 FormData，再用 fetch 发送到后端接口。关键兼容点有二：一是 Safari 15.4+ 才完整支持 fetch 上传大文件时的进度事件，旧版需 fallback 到 XMLHttpRequest；二是部分安卓 WebView 对 dataTransfer.items 支持不全，优先用 files 而非 items 获取文件。
增强用户体验的关键细节
仅实现功能远远不够。拖拽区域应有视觉反馈：在 dragenter 和 dragover 时添加高亮边框或背景色，dragleave 时移除；drop 后立即禁用按钮并显示 loading 状态；上传失败要捕获 fetch 的 network error 和后端返回的 4xx/5xx，并给出明确提示（如“文件过大”“网络异常”）。另外，建议限制拖入文件数量和单个大小（例如 ≤ 100MB），前端校验后提前拦截，减少无效请求。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
