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">），设置基础样式和事件监听：
<ul>
<li>给元素添加 <code>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：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
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 操作本身轻量，重点在事件逻辑和边界处理。
