用 实现头像上传前预览，需监听 change 事件，校验 event.target.files[0] 存在且为图片，用 url.createobjecturl() 生成临时 url 赋给 的 src，预览后调用 url.revokeobjecturl() 清理内存。
怎么用 <input type="file"> 实现头像上传前预览
浏览器原生支持，不需要后端或第三方库。核心是监听 change 事件，读取用户选中的文件，用 URL.createObjectURL() 生成临时 URL 赋给 <img alt="HTML怎么插入用户头像上传预览_HTML avatar preview结构教程【交互】" > 的 src。
常见错误现象：<img alt="HTML怎么插入用户头像上传预览_HTML avatar preview结构教程【交互】" > 一直空白、控制台报 Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature（通常是传了 event.target.files[0] 以外的东西）。
- 必须检查
event.target.files.length > 0，否则files[0]是undefined - 只接受图片类型：建议加
accept="image/*"属性，但不能依赖它——用户仍可绕过，需在 JS 中校验file.type.startsWith('image/') - 预览后记得在下次选择时清除旧的 object URL，避免内存泄漏：
URL.revokeObjectURL(oldSrc)
为什么不用 FileReader.readAsDataURL() 而用 createObjectURL()
createObjectURL() 更轻量、更快，尤其对大图；readAsDataURL() 会把整个文件转成 base64 字符串，内存占用翻倍，还可能触发 Safari 的 base64 渲染 bug。
使用场景：纯前端预览、不涉及上传逻辑时，createObjectURL() 是首选。
立即学习“前端免费学习笔记（深入）”；
-
createObjectURL()返回的是 blob URL（形如blob:https://xxx/yyy），只在当前页面生命周期有效 - 如果后续要上传，后端通常不认 blob URL，你仍需把
files[0]塞进FormData发送 - Chrome/Firefox 支持良好；Safari 15.4+ 才稳定支持 blob URL 直接赋值给
img.src，旧版需 fallback 到FileReader
<img alt="HTML怎么插入用户头像上传预览_HTML avatar preview结构教程【交互】" > 预览图变形、模糊或不显示怎么办
不是代码没跑通，而是样式或属性没配对。HTML 图片预览极度依赖 CSS 控制宽高和缩放行为。
常见错误现象：头像被拉伸成椭圆、边缘锯齿明显、点击上传后图片一闪就消失。
- 务必设置
<img alt="HTML怎么插入用户头像上传预览_HTML avatar preview结构教程【交互】" >的width和height（或用 CSSwidth/height+object-fit: cover） - 不要用
max-width: 100%单独撑开，容易导致原始尺寸过小的图糊掉 - 预览前清空
img.src（设为''或'#'），否则旧图残留可能造成闪动 - 移动端要注意
viewport缩放和像素比，object-fit在 iOS Safari 上需配合display: block避免底部留白
上传前裁剪或压缩头像要不要做
不做。预览阶段只负责“看到”，裁剪和压缩属于上传准备环节，混在一起会让逻辑变重、出错点变多。
使用场景：用户上传头像 → 实时预览 → 点击确认 → 触发裁剪/压缩 → 再上传。
- 裁剪推荐用
cropperjs或原生<canvas></canvas>，别在change回调里直接操作 canvas - 压缩可用
canvas.toBlob()设置质量参数，但注意：iOS Safari 对toBlob支持不稳定，建议 fallback 到toDataURL()再转 blob - 如果只要「限制大小」，可以在预览后检查
file.size > 2 * 1024 * 1024（2MB），直接提示用户重选，别自动压缩
真正麻烦的是兼容性边界：Safari 对 blob URL 的生命周期管理更严格，Android WebView 版本碎片化严重，object-fit 在老 UC 浏览器里压根不生效。这些细节不写进初始化逻辑，后面改起来反而更痛。
