拖拽后filereader读取图片失败的主因是未过滤非图像文件，须在drop事件中校验file.type.startswith(‘image/’)；onload中this.result为字符串，不可传入url.createObjecturl()；大文件需加onerror提示；缩略图应基于naturalwidth/height等比缩放，禁用宽高强制100%；多文件预览需避免for循环导致顺序错乱。
拖拽后 FileReader 读取图片失败：常见原因和修复点
不是所有 File 对象都能直接用 readAsDataURL 生成缩略图——比如用户拖拽的是文件夹、.zip 或者非图像 MIME 类型（如 text/plain），FileReader 不报错但后续 img.src 会静默失败。
- 务必在
drop事件里过滤file.type.startsWith('image/')，别只靠后缀名判断 -
FileReader的onload回调中，this.result是字符串，不是 Blob URL，别误传给URL.createObjectURL() - 如果
file.size超过几 MB，读取可能卡顿或超时，建议加onerror并提示“文件过大”
生成缩略图时宽高被拉伸：CSS 和 img 属性怎么配
直接把 FileReader 读出的 data URL 赋给 img.src 后，浏览器默认按原始尺寸渲染，容易撑破容器。缩略图的核心是「等比缩放+裁剪或留白」，不是靠 CSS 强制拉伸。
- 用
img.naturalWidth/naturalHeight获取真实尺寸，再计算缩放比（比如限制最大 200px 宽） - 避免写
img.style.width = '100%'; img.style.height = '100%'—— 这会破坏宽高比 - 推荐用
object-fit: cover（配合固定容器尺寸）或object-fit: contain，兼容性需注意 IE 不支持
多个文件拖拽时预览顺序错乱：为什么 readAsDataURL 不能保证执行顺序
FileReader 是异步的，循环读取多个 File 时，谁先读完谁先触发 onload，和原始顺序无关。如果你用索引数组存 dom 元素，很容易把缩略图插到错误位置。
- 不要用
for (let i = 0; i + 闭包索引，改用 <code>for...of或Array.from(files).foreach()配合闭包变量 - 更稳妥的做法：每个
FileReader实例绑定对应file和目标img元素，例如reader.img = targetImg，在onload里直接操作this.img - 如果需要严格顺序渲染（比如带序号的列表），建议先全部读完再批量插入，而不是边读边插
dragover 默认行为不取消：为什么拖进页面没反应
这是最常被忽略的一步：html5 拖拽中，drop 事件只有在 dragover 事件被显式阻止默认行为后才会触发。否则拖进去就直接打开文件或下载，根本进不到你的预览逻辑。
立即学习“前端免费学习笔记（深入）”；
- 必须监听
dragover并调用Event.preventDefault()，仅drop监听没用 - 可以只对特定容器（比如
id="drop-area"）加这个监听，避免全局影响 - 顺手加个
dragenter/dragleave来切换高亮样式，用户体验更明确
拖拽预览看着简单，真正上线时最容易栽在 MIME 判断遗漏、FileReader 异步顺序错乱、还有那个非加不可的 preventDefault() 上。这几个点漏一个，整个功能就静默失效。