图片上传前预览需用FileReader读取input.files[0]转data URL赋给img.src；监听change事件，检查files存在性，避免直接读value或忽略length判断；多图时对每个File单独创建FileReader实例并遍历；注意IE清空input.value确保重复选择触发。
input type="file" 选中图片后怎么立刻显示预览
浏览器原生支持通过 FileReader 读取本地文件内容，图片上传前预览的核心就是用它把 input.files[0] 转成 data URL，再赋给 <img> 的 src 属性。不需要发请求、不依赖后端，纯前端就能完成。
常见错误是直接读取 input.value（它只返回文件路径，且现代浏览器出于安全限制会显示假路径如 C:\fakepath\xxx.jpg），或者漏掉对 files.length 的判断导致空文件时出错。
实操建议：
- 监听
input的change事件，而不是click或input - 先检查
event.target.files && event.target.files[0]是否存在 - 创建
new FileReader()，监听load事件，在回调里设置img.src = reader.result - 别忘了在
loadstart或之前清空上一次的src，避免旧图残留
多图上传时如何批量预览并控制顺序
当 input 设置了 multiple 属性，files 是一个 FileList 对象——它不是数组，不能直接用 map 或 forEach，但可以用 Array.from() 转换。顺序和用户选择顺序一致，无需额外排序。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑是并发读取多个文件时没做隔离，导致所有 img 最终都显示最后一个文件的预览（因为闭包中复用了同一个 reader 或 img 引用）。
实操建议：
- 对每个
File单独 new 一个FileReader实例 - 用
for...of或Array.from(files).forEach((file, i) => { ... })遍历，确保每次作用域独立 - 如果要插入多个
<img>，推荐提前创建好容器（如<div id="preview-container"></div>），每次生成新img后appendChild进去 - 注意大图（如 >5MB）可能造成卡顿，可加
reader.readAsDataURL(file)前简单校验file.size
预览图模糊或尺寸异常怎么办
预览图本身是原始图片的缩放渲染，模糊通常不是代码问题，而是浏览器默认按容器尺寸拉伸导致像素失真。HTML 中 <img> 没设宽高、CSS 用了 width: 100% 但父容器太窄，都会让小图被强行撑开。
另一个常见原因是误用了 URL.createObjectURL(file) 但没手动释放内存（虽然不影响预览效果，但长期驻留会占内存）。
实操建议：
- 优先用
FileReader.readAsDataURL()，它生成的是 base64 字符串，生命周期由 JS 控制，无需手动回收 - 如果坚持用
createObjectURL，记得在切换文件或组件卸载时调用URL.revokeObjectURL(url) - 给预览
<img>加明确的max-width和height: auto，避免 CSS 强制变形 - 移动端要注意
image-rendering: -webkit-optimize-contrast等属性对缩放质量的影响，但兼容性有限，慎用
IE10/11 下 FileReader 不生效或报错
IE10+ 支持 FileReader，但有硬伤：不支持 readAsDataURL 读取图片以外的二进制类型（不过预览场景刚好够用）；更关键的是，IE 对 change 事件触发时机处理不同——比如重复选同一个文件，IE 可能不触发事件，而 Chrome/Firefox 会。
这不是 bug，是规范差异：IE 认为文件值没变就不触发，其他浏览器认为“重新选择”即算变更。
实操建议：
- 在
change处理函数开头，手动清空input.value = ''，这样下次点选同一文件也能触发 - IE11 不支持
FileList.forEach，必须用传统for (let i = 0; i - 不要依赖
File.prototype.type判断图片类型，IE 有时返回空字符串，改用文件扩展名或file.name.match(/\.(jpg|jpeg|png|gif)$/i) - 如果项目必须支持 IE，建议把
FileReader封装成 Promise 并加 try/catch，失败时降级提示“请使用 Chrome/Firefox 浏览器”
最易被忽略的一点：用户取消选择（点“取消”按钮）时，input.files 为空，但 input.value 可能还残留上次的值，所以永远以 files.length 为准，而不是靠 value 判断是否选了文件。
