html5文件拖拽上传需监听dragover、dragenter、dragleave、drop四事件，校验文件合法性后用formdata与fetch上传，并处理移动端降级等体验细节。
在HTML5中实现文件拖拽上传，核心是利用原生 Drag and Drop API 捕获拖入行为，并结合 File API 读取文件内容，再用 FormData 和 fetch（或 XMLHttpRequest）完成上传。关键不是写一堆封装库，而是理清事件流和边界处理。
监听拖拽区域的四个核心事件
一个可拖拽上传的区域需正确响应以下事件，缺一不可：
-
dragover：必须调用
event.preventDefault()，否则浏览器默认拒绝拖入；同时建议设置event.dataTransfer.dropEffect = 'copy'显示友好光标 -
dragenter：用于标记“进入有效区域”，可添加高亮样式（如边框变蓝），注意该事件会频繁触发，建议加节流或用
!isDragging标志位控制一次进入 -
dragleave：当鼠标移出区域时清除高亮，注意子元素触发也会冒泡，可用
event.relatedTarget判断是否真正离开容器 -
drop：真正获取文件的地方，调用
event.preventDefault()阻止默认打开文件行为，再从event.dataTransfer.files提取FileList
安全提取并校验拖入的文件
不要直接信任 dataTransfer.files，需做基础过滤：
- 检查长度是否为 0（空拖放或仅拖了文件夹）
- 遍历每个
File对象，读取.name、.size、.type，拒绝非法后缀（如html、exe）或超大文件（例如 >100MB） - 注意：浏览器对文件夹拖拽支持不一；Chrome/Edge 支持
webkitGetAsEntry()递归读取子项，但 Firefox 不支持，建议明确提示“仅支持单层文件”
构造上传请求并反馈进度
使用 FormData 打包文件，配合 fetch 发送，并监听上传进度：
- 创建
const formData = new FormData()，循环调用formData.append('file', file, file.name)（第三个参数保留原始文件名，服务端更易处理） - 若需多文件同传，可统一用相同字段名（如
append('files', file)），后端接收为数组 - 用
fetch(uploadUrl, { method: 'POST', body: formData })发送；如需进度条，改用XMLHttpRequest，监听upload.onprogress事件计算百分比 - 上传成功后解析 JSON 响应，显示文件名+状态；失败时捕获
catch或检查response.ok，给出具体错误提示（如“网络中断”“服务忙”）
补充体验细节提升健壮性
用户操作常有意外，这些细节能减少报错和困惑：
- 禁用区域默认文本选中（
user-select: none），避免拖拽时误选文字 - 支持点击区域弹出系统文件选择框（隐藏
<input type="file">，用label或click()触发） - 拖拽过程中禁用其他交互（如按钮点击），上传中显示 loading 状态并禁用拖拽区
- 移动端不支持拖拽，需降级为点击上传，并在文案中注明“手机请点选文件”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
