拖拽文件上传并显示缩略图的核心是监听dragover和drop事件，阻止默认行为，校验图片类型与大小，用FileReader读取为Data URL后渲染到img标签，并处理错误及移动端降级。
拖拽文件上传并显示缩略图，核心是监听拖放事件（dragover、drop），读取文件内容生成预览，再通过 FileReader 解析为 Data URL 渲染到页面。关键在于阻止默认行为、正确获取文件、安全处理图片类型和错误。
监听拖放区域并阻止默认行为
浏览器对拖拽有默认响应（如打开文件），必须显式阻止，否则无法触发 drop。只需给目标容器绑定 dragover 和 drop 事件，并调用 preventDefault()：
-
dragover：仅需阻止默认行为，让drop可被触发（不处理文件） -
drop：阻止默认 + 获取event.dataTransfer.files中的文件列表 - 建议同时监听
dragenter和dragleave添加/移除高亮样式，提升交互反馈
校验文件类型与大小
不是所有文件都适合生成缩略图。应在读取前快速过滤：
- 检查
file.type是否以"image/"开头（如"image/jpeg"、"image/png"） - 用
file.size限制单个文件大小（例如 ≤ 5MB），避免大图卡顿或内存溢出 - 跳过非图片文件或超限文件，可提示用户：“仅支持 JPG/PNG/GIF，且不超过 5MB”
用 FileReader 生成缩略图并渲染
对每个合格图片文件，创建 FileReader 实例，读取为 Data URL，再插入 <img> 标签：
立即学习“Java免费学习笔记（深入）”；
- 调用
reader.readAsDataURL(file) - 在
reader.onload回调中，获取reader.result（即 base64 字符串） - 动态创建
<img>元素，设置src为该结果，并添加到页面（如一个<div id="preview-container">） - 可加简单样式控制缩略图尺寸：
img { max-width: 120px; max-height: 120px; margin: 4px; }
处理异常与用户体验细节
实际使用中常见问题需兜底：
-
FileReader.onerror捕获读取失败（如文件损坏），提示“缩略图生成失败” - 拖入多个文件时，逐个处理，避免阻塞；可用
for...of遍历files数组 - 为防重复上传，可禁用上传区或加 loading 状态；上传完成后可清空预览区或保留供后续操作
- 移动端不支持拖拽，需额外提供“点击选择文件”按钮作为降级方案（
<input type="file" accept="image/*">）
