h5拖拽上传需监听dragenter、dragover（必preventdefault）、dragleave和drop事件，通过datatransfer.files获取文件并校验，用formdata配合fetch提交，注意移动端兼容性及体验优化。
在 H5 中实现拖拽文件上传，核心是利用原生 drag 和 drop 事件配合 File API 与 FormData 完成文件读取和提交，无需第三方库。
监听拖拽区域的 enter、over、leave 和 drop 事件
要让一个元素支持拖拽接收文件，必须阻止 dragenter 和 dragover 的默认行为（否则浏览器会打开文件），同时可选地添加视觉反馈：
- 给目标区域绑定
dragenter：标记进入状态，可添加高亮样式 - 绑定
dragover：必须调用event.preventDefault()，否则无法触发drop - 绑定
dragleave：移出时还原样式 - 绑定
drop：获取event.dataTransfer.files，即拖入的文件列表
从 dataTransfer 获取文件并校验
event.dataTransfer.files 是一个 FileList 对象，类似数组，可遍历处理：
- 检查
files.length是否大于 0 - 对每个
file读取file.name、file.size、file.type做格式/大小校验（如只允许图片且 ≤5MB） - 注意：不能直接访问文件内容，需用
FileReader或直接通过FormData提交
用 FormData 提交文件到后端
拿到文件后，构造 FormData 并用 fetch 或 XMLHttpRequest 发送：
const formData = new FormData();-
formData.append('file', file);（单文件）或循环append('files', file)（多文件） - 使用
fetch('/upload', { method: 'POST', body: formData })即可上传；注意不要手动设置Content-Type，让浏览器自动设为multipart/form-data并带上 boundary
补充：兼容性与体验优化
现代浏览器（Chrome 4+、Firefox 3.6+、Edge、Safari 5.1+）均支持，但要注意：
- 移动端 Safari 对
drop支持有限，建议降级为点击选择文件（<input type="file">） - 可结合
dragend清理临时样式 - 上传中显示 loading 状态，上传后提示成功或错误（检查响应状态码和 JSON 错误信息）
- 大文件建议加进度条：监听
XMLHttpRequest.upload.onprogress，或用fetch配合ReadableStream（较新）
