核心是监听change事件，用URL.createObjectURL()即时预览；需手动校验size/type（accept可绕过）；隐藏input并用label触发；必须处理files.length为0的取消场景。
直接用 <input type="file"> 配合 accept="image/*" 就能实现基础头像选择，但用户真正卡住的不是“怎么选”，而是“选完怎么预览”“怎么限制大小和格式”“怎么防止点开又关掉导致状态丢失”。
怎么让选中的图片立刻预览（不用上传）
核心是监听 input 的 change 事件，读取 files[0] 并用 URL.createObjectURL() 创建临时 URL：
<input type="file" id="avatar-input" accept="image/*">
<img id="avatar-preview" alt="头像预览">
<p><script>
const input = document.getElementById('avatar-input');
const img = document.getElementById('avatar-preview');</p><p>input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file || !file.type.startsWith('image/')) return;</p><p>// 释放旧的 object URL 防止内存泄漏
if (img.src) URL.revokeObjectURL(img.src);
img.src = URL.createObjectURL(file);
});
</script>注意：每次调用 createObjectURL 后，只要没手动 revoke，浏览器就会一直保留该引用——长期不清理会累积内存占用。
怎么限制文件大小和类型（不只是靠 accept）
accept 只控制文件选择器弹窗里的过滤项，完全可被绕过（比如拖拽非图片、改后缀）。必须在 JS 中二次校验：
立即学习“前端免费学习笔记（深入）”；
- 检查
file.size（例如限制 ≤ 2MB：if (file.size > 2 * 1024 * 1024)） - 检查
file.type（如!['image/jpeg','image/png','image/webp'].includes(file.type)） - 更稳妥的做法是用
file.type+file.name.split('.').pop().toLowerCase()双重判断扩展名
别依赖 MIME 类型判断是否为图片——某些系统会把 .jpg 识别成 application/octet-stream。真要严格校验，得读取文件前几个字节（即“魔数”），但对头像场景通常没必要。
点击头像区域触发文件选择（隐藏原 input）
常见做法是把 <input type="file"> 设为 display: none，再用 label 或其他元素绑定 click 事件触发它：
<label for="avatar-input" class="avatar-trigger"> <img id="avatar-preview" src="/default.png" alt="点击更换头像"> </label> <input type="file" id="avatar-input" accept="image/*" style="display:none">
关键点：
- 确保
label的for值与input的id完全一致（区分大小写） - 不要用
click()模拟触发——现代浏览器禁止脚本主动调用input[type=file].click()，除非是用户真实交互的后续（比如在onclick里直接调） - 如果用 div 等非 label 元素触发，需手动
input.click()，且必须绑定在用户手势事件内（如div.addEventListener('click', () => input.click())）
选完又取消时如何保持 UI 状态一致
当用户打开选择器但没选任何文件就关闭（即 e.target.files.length === 0），很多代码会忽略这个分支，导致预览图残留旧内容或按钮状态错乱。
务必显式处理空选择：
- 在
change回调开头加判断：if (!e.target.files.length) { img.src = '/default.png'; return; } - 如果用了裁剪组件（如 cropper.js），取消选择时也要调用
destroy()或清空实例，否则下次打开可能残留上一次的 canvas 状态 - 表单提交前，别只检查
img.src是否变化——得比对当前input.files[0]是否存在，否则用户选了又取消，你仍会误传旧头像
最易被忽略的是：移动端 iOS Safari 在某些版本中，取消文件选择器后 change 事件根本不会触发，input.files 保持为空但界面无反馈。此时建议加一个“重置”按钮作为兜底。
