文件选择无反应需绑定onchange事件而非onclick；预览须用FileReader读取Data URL；大图应拦截避免卡顿；头像裁剪压缩需canvas；样式定制推荐label模拟按钮。
file input 选完文件没反应？检查 onchange 是否绑定对了
浏览器原生 <input type="file"> 不会自动触发预览，必须手动监听 onchange 事件——不是 onclick，也不是 oninput。很多人绑错事件，点完选文件弹窗，关掉就以为“没生效”，其实是根本没进回调。
-
onchange只在用户真正选中文件（含取消后再次选择）时触发；click仅打开弹窗，不表示文件已确定 - 如果用 JS 动态创建
<input>，得在插入 DOM 后再绑定事件，否则监听无效 - 移动端 iOS Safari 对
change触发时机更敏感，建议加一层event.target.files.length > 0判断再执行预览逻辑
预览图片显示不出来？FileReader 的 readAsDataURL 是关键路径
不能直接把 File 对象赋给 <img src>，必须转成 Data URL。FileReader 是唯一可靠方式，URL.createObjectURL() 虽快但有内存泄漏风险，尤其频繁上传时。
-
readAsDataURL()是异步的，必须在reader.onload回调里取reader.result，写到img.src上 - 别漏掉错误处理：
reader.onerror里打个console.error(reader.error)，常见报错是Failed to execute 'readAsDataURL' on 'FileReader': The requested file could not be read，多因文件被其他进程占用或路径异常（但浏览器里其实没路径） - 大图（比如 5MB+）读取可能卡顿，可先用
file.size < 2 * 1024 * 1024做拦截，避免 UI 假死
头像裁剪和压缩要不要前端做？看场景再决定
纯预览展示头像，用 FileReader + <img> 就够了；但若要限制尺寸、压缩体积、支持裁剪，则必须引入额外逻辑，不是 input 自身能力。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 裁剪：得用
<canvas>绘制缩放/截取，再调canvas.toBlob()生成新File对象 - 压缩：
canvas.toBlob(callback, 'image/jpeg', 0.8)可控质量，但注意 PNG 不支持质量参数，传了也无效 - 别依赖
accept="image/*"做校验——它只过滤文件选择弹窗里的类型，用户拖拽或改后缀仍能绕过，后端必须二次验证
样式难改？隐藏原生 input，用 label 模拟按钮更可控
原生 <input type="file"> 样式几乎无法用 CSS 定制（尤其是按钮文字），强行 hack 容易失效。最稳方案是视觉上隐藏它，用 <label> 关联，点击 label 触发 input。
立即学习“前端免费学习笔记（深入）”；
- 给
input加style="position: absolute; width: 0; height: 0; opacity: 0;"，确保不可见但可交互 -
label加for="xxx"或包裹input，点击即触发选择弹窗 - 预览区用
<img>占位，初始src设为默认头像地址（如"data:image/svg+xml,%3Csvg..."内联 SVG），避免空白闪动
事情说清了就结束。真正麻烦的不是显示预览，而是用户选完又点“取消”、重复上传同名文件、或者在表单提交前忘了校验文件有效性——这些边界情况，往往比预览本身更耗调试时间。
