HTML5拖拽API支持外部文件拖入网页，需监听dragover并调用preventDefault()，通过dataTransfer.files读取文件，用FileReader异步处理预览与校验。
HTML5 拖拽 API 支持外部文件（如本地图片、PDF、文本等）直接拖入网页，这比传统点击上传更直观高效。但和普通元素拖拽不同，文件拖入依赖 dataTransfer.files，且需专门处理 MIME 类型校验、读取、错误反馈等环节。
确保目标区域能接收文件
仅靠 draggable="true" 对文件无效——用户拖的是系统文件，不是页面元素。关键在目标区域的事件监听：
- 必须监听
dragover并调用e.preventDefault()，否则浏览器默认禁止投放 - 建议同时监听
dragenter和dragleave做视觉提示（如高亮边框），提升可感知性 - 注意：
drop事件只在松手瞬间触发，此时才是读取文件的时机
从 dataTransfer.files 中安全提取文件
e.dataTransfer.files 是一个 FileList 对象，不是数组，不能直接用 forEach。需转为数组或遍历索引：
- 用
Array.from(e.dataTransfer.files)转成真数组，便于 filter/map - 检查文件类型：通过
file.type（如"image/png"）或扩展名（file.name.split('.').pop().toLowerCase()）做白名单校验 - 限制大小：用
file.size < 10 * 1024 * 1024（10MB）等逻辑提前拦截超大文件 - 避免空拖放：
if (!e.dataTransfer.files.length) return
读取并预览文件内容
文件内容不能直接访问，需借助 FileReader 异步读取：
立即学习“前端免费学习笔记（深入）”；
- 图片可用
readAsDataURL()转为 base64，赋值给<img src>即时预览 - 文本文件用
readAsText()，支持指定编码（如readAsText(file, 'UTF-8')） - PDF 或二进制文件建议用
readAsArrayBuffer()，后续交由 PDF.js 或后端解析 - 每个
FileReader实例只能读一个文件，多文件需循环创建新实例
处理常见异常与兼容细节
文件拖入看似简单，实际容易卡在边缘情况：
- Safari 对
dragover的 preventDefault 要求更严格，建议在dragenter也调一次preventDefault() - Chrome/Firefox 不允许在
dragstart中操作dataTransfer.files（它只存在于 drop 阶段），别试图提前读取 - 拖入文件夹？
e.dataTransfer.items可能含webkitGetAsEntry()（仅 Chrome/Safari），但兼容性差，生产环境慎用 - 用户中途取消拖放？监听
dragleave清理高亮状态，避免界面残留
