拖拽上传的核心是监听drop事件并阻止默认行为，通过File API读取DataTransfer中的文件列表；需连续处理dragover（preventDefault）、dragleave（移除高亮）和drop（获取files）三个事件。
拖拽上传的核心在于监听 drop 事件并阻止默认行为，再通过 File API 读取用户拖入的文件对象——关键不是“拖”，而是“接住”并正确解析 DataTransfer 中的文件列表。
监听拖拽区域的三个关键事件
要让一个元素支持拖拽上传，需连续响应 dragover、dragleave 和 drop 事件：
-
dragover：必须调用
event.preventDefault()，否则浏览器会执行默认的“打开文件”行为，导致无法触发drop - dragleave：用于移除高亮样式，提示用户已离开可投放区域
-
drop：在此获取
event.dataTransfer.files，它是一个FileList对象，与<input type="file">的files属性结构一致
用 File API 安全读取并预览文件
拿到 File 对象后，不建议直接上传原始二进制流，而应先校验类型、大小，并为图片类文件生成预览：
- 检查
file.type（如"image/jpeg"）和file.size（单位字节），过滤掉不合规文件 - 对图片使用
FileReader.readAsDataURL(file)，完成后将结果赋给<img alt="利用 File API 实现拖拽上传：构建直观的文件交互界面" >的src属性实现即时预览 - 非图片文件（如 PDF、TXT）可调用
readAsText()或readAsArrayBuffer()按需处理
构建轻量上传逻辑（不依赖第三方库）
预览确认后，可通过 FormData 组装数据并用 fetch 发起上传：
- 创建
const formData = new FormData()，然后formData.append("file", file) - 设置请求头时 不要手动设
Content-Type，让浏览器自动生成带 boundary 的 multipart 格式 - 搭配
fetch("/upload", { method: "POST", body: formData })即可发送；服务端接收方式与传统表单提交完全一致
增强体验的小细节
真实场景中，几个低成本优化能显著提升直观感：
- 拖入时给容器添加 border: 2px dashed #007bff 类样式，松手后立即还原
- 支持多文件拖入：
event.dataTransfer.files天然是多个File，遍历上传即可 - 捕获
file.name和file.size显示在界面上，例如 “上传中：report.pdf (1.2 MB)”
