拖拽上传区域需监听dragenter、dragover、drop、dragleave事件并阻止默认行为，从dataTransfer.files提取FileList，校验类型与大小后预览或上传。
实现拖拽上传区域，核心是监听浏览器原生的 dragenter、dragover、drop 和 dragleave 事件，并阻止默认行为，再提取 FileList 进行后续处理（如预览、校验、上传）。
基础结构与样式：创建可拖放区域
用一个 <div> 作为容器，设置明确宽高、边框和提示文字，配合 CSS 实现视觉反馈：
- 添加
border: 2px dashed #999和text-align: center，让区域看起来像“上传区” - 用
:hover或 JS 切换 class 控制悬停/拖入时的背景色或边框色（例如border-color: #007bff） - 确保容器有明确尺寸（如
min-height: 150px），否则拖入时可能无法触发事件
关键事件监听与默认行为拦截
必须在 dragenter 和 dragover 中调用 event.preventDefault()，否则浏览器会执行默认打开文件行为；drop 时才能拿到文件：
-
dragenter：进入区域时添加高亮 class，记录是否已进入（避免重复触发） -
dragover：持续触发，只做preventDefault()，不处理逻辑 -
drop：调用preventDefault()后，从event.dataTransfer.files获取文件列表 -
dragleave：离开区域时移除高亮 class（注意：子元素进出也会触发，需判断是否真正离开容器）
安全提取文件并做基础校验
event.dataTransfer.files 是 FileList 对象，可转为数组处理：
立即学习“前端免费学习笔记（深入）”；
- 检查长度：
if (files.length === 0) return - 过滤非文件项（如拖入文件夹时部分浏览器会包含空项）：
Array.from(files).filter(f => f instanceof File) - 简单校验示例：限制类型
f.type.startsWith('image/') || f.name.endsWith('.pdf')，限制大小f.size < 10 * 1024 * 1024（10MB） - 校验失败时给出明确提示（如 Toast 或区域内文字更新），不中断后续流程
后续处理建议：预览 + 上传准备
拿到有效文件后，通常需要用户确认或立即上传：
- 图片类文件可用
URL.createObjectURL(file)生成临时链接，插入<img>预览 - 把文件存入状态（如 React 的
useState或原生let pendingFiles = []），供上传按钮触发 - 如需自动上传，可封装为函数（如
uploadFiles(files)），内部用FormData+fetch或XMLHttpRequest - 别忘了处理错误：网络失败、服务端拒绝、取消上传等场景应有回退机制
