DOM拖拽上传核心是监听dragenter/dragover/drop/dragleave事件并preventDefault以启用拖放，从dataTransfer.files获取文件，用FormData和fetch上传。
用 DOM 操作实现文件拖拽上传区域，核心是监听 dragenter、dragover、drop 和 dragleave 事件，阻止默认行为以启用拖放，并从 event.dataTransfer.files 中获取文件对象，再通过 FormData 和 fetch（或 XMLHttpRequest）上传。
1. 创建并绑定基础拖拽区域
先准备一个容器元素（如 <div id="drop-area">），设置基础样式和事件监听：
- 给元素添加
dragover和dragenter监听器，调用event.preventDefault()—— 这是允许文件拖入的关键，否则浏览器会打开文件而不是触发drop - 监听
drop事件，从中提取event.dataTransfer.files（是一个FileList） - 可选：监听
dragleave用于移出时恢复样式（比如取消高亮）
2. 处理文件并预览（可选但实用）
拿到 FileList 后，可以遍历处理每个文件：
- 检查
file.type或file.name判断是否符合要求（如只接受image/*） - 用
URL.createObjectURL(file)生成临时 URL，显示缩略图（适用于图片） - 读取文件大小：
file.size（单位字节），避免超限上传 - 把文件存入数组或直接构造成
FormData
3. 构建 FormData 并上传
拖拽获得的 File 对象可直接 append 到 FormData：
立即学习“Java免费学习笔记（深入）”；
const formData = new FormData();-
for (const file of files) { formData.append('files', file); }（注意字段名要和服务端约定一致） - 用
fetch('/upload', { method: 'POST', body: formData })发送；不要设置Content-Type头，让浏览器自动设置带 boundary 的multipart/form-data - 上传中可监听
upload.onprogress（若用XMLHttpRequest）或用fetch配合ReadableStream实现进度（较复杂，通常用XMLHttpRequest更直观）
4. 错误与用户体验细节
实际使用中容易忽略但影响体验的地方：
- 拖拽区域需有明确视觉反馈（例如加边框、背景色变化），可用 CSS 类控制：
event.target.classList.add('drag-over')+dragleave时移除 - 单个文件或多个文件统一处理，避免只取
files[0]而忽略多选 - 捕获
fetch的catch或检查响应状态码，提示“上传失败”而非静默失败 - 上传成功后清空预览区、重置状态，防止重复提交
不复杂但容易忽略。关键就是三步：允许拖放（preventDefault）、提取文件、封装上传。DOM 操作本身轻量，重点在事件逻辑和边界处理。
