必须在 dragover 中调用 event.preventDefault() 并设 dropEffect='copy'，drop 中同样需 preventDefault()；FileList 需转数组过滤 image/ 类型；预览优先用 URL.createObjectURL 并及时 revoke；尺寸校验需异步加载 Image 获取 naturalWidth/Height。
拖拽区域怎么监听 dragover 和 drop 事件
浏览器默认会阻止 dragover 和 drop 的默认行为，不加处理的话，图片拖进来直接打开新页面或下载，根本不会触发上传逻辑。
必须在 dragover 中调用 event.preventDefault()，同时建议设置 event.dataTransfer.dropEffect = 'copy' 明确提示用户这是“复制上传”操作；drop 里同样要 preventDefault()，否则事件可能被中断。
- 只监听
drop不够——没dragover阻止默认行为，拖入时浏览器就接管了 -
dragenter可选，用于高亮区域，但不是必需；dragleave用来取消高亮，注意它会在子元素间频繁触发，建议用计时器防抖 - 别在
body或大容器上直接监听——容易误触，推荐绑定到明确的<div id="drop-area"> 这类语义化区域 <h3>如何从 DataTransfer 对象里正确读取图片文件</h3> <p><code>event.dataTransfer.files是FileList，不是数组，不能直接用map或展开运算符；图片可能混在其他文件（如 .txt、.pdf）里，需要手动过滤。关键判断依据是
file.type.startsWith('image/')，而不是只看后缀名——后缀可伪造，MIME 类型由浏览器解析文件头得出，更可靠。立即学习“前端免费学习笔记（深入）”；
- 用
Array.from(event.dataTransfer.files)转成数组再filter，避免原生FileList方法缺失问题 - 单图上传时取
files[0]即可，但务必先判空：if (!files.length) return - 如果允许多图，注意服务端是否支持批量，前端可逐个
FileReader预览，或统一用FormData.append('images', file)批量提交
用 FileReader 预览图片时常见的内存与兼容性问题
FileReader的readAsDataURL会把图片转成 base64 字符串，大图（比如 5MB 手机照片）可能导致内存飙升、UI 卡顿，甚至 iOS Safari 崩溃。更稳妥的方式是用
URL.createObjectURL(file)创建临时对象 URL，它不经过 JS 内存，直接指向浏览器内部缓存，性能好、兼容性也好（IE10+ 支持）。-
createObjectURL后必须在不用时调用URL.revokeObjectURL(url)，否则内存泄漏——尤其在反复拖拽预览时 - IE 9 及以下不支持
FileReader和createObjectURL，如需兼容，得降级为传统表单 +<input type="file"> - 预览
<img alt="HTML如何实现图片的拖拽上传_HTML5文件操作API" >的src设为对象 URL 后，加载失败不会抛 JS 错误，要用img.onerror捕获并清理 URL
上传前要不要校验图片尺寸或类型？怎么校验才靠谱
前端校验只是用户体验优化，不能替代服务端检查。但用户拖错图（比如拖了个 10MB 视频）再等十几秒上传完才报错，体验极差，所以基础校验有必要。
尺寸校验必须解码图片——
File对象本身不包含宽高信息，得靠Image对象加载后读取naturalWidth/naturalHeight；这个过程是异步的，不能和上传逻辑串行阻塞。- 尺寸校验建议设超时（如 3s），避免损坏图片长时间卡住流程
- 类型校验优先用
file.type，辅以文件头检测：读取file.slice(0, 4)的 ArrayBuffer，比对 JPEG（ffd8ff）、PNG（89504e47）等 magic bytes - 不要依赖
file.name后缀判断类型——用户可以轻易把evil.exe改成evil.jpg
真正麻烦的是并发控制和错误重试：用户连续拖三张图，每张都走 FileReader → 尺寸校验 → 上传，中间任意一步失败都要有明确反馈，且不能影响其他图片。这部分逻辑很容易写散，建议封装成 Promise 链或用
AbortController统一管理请求生命周期。 - 用
