必须监听input的change事件，用filereader或url.createobjecturl读取文件并预览图片，注意accept属性、样式隔离、异常处理及ios兼容性。
用 input type="file" 拦截原生上传行为，直接读取本地文件
Bootstrap 表单本身不提供图片预览能力，关键在接管 <input type="file" accept="image/*"> 的 change 事件，用 FileReader 读取选中的文件，避免触发表单提交或跳转。不要依赖任何后端接口做“预览”，那会延迟、失败且不必要。
常见错误是绑定 click 或 submit 事件去处理，结果文件根本没读进来；或者漏写 accept="image/*"，导致用户误选 PDF 等非图文件，FileReader 读取后 result 为空字符串，img.src 赋值失败但无报错。
- 必须监听
input元素的change事件（不是click） - 检查
e.target.files[0]是否存在，再调用readAsDataURL() - 预览
<img>标签需提前在 HTML 中定义好，不要动态document.createElement后再塞进表单——容易被 Bootstrap 的.form-control样式撑变形
预览图要适配 Bootstrap 表单布局，别被 .form-control 撑歪
Bootstrap 默认给 <input class="form-control"> 设了固定高度和内边距，如果把 <img> 直接插在同级位置，它会被当成行内元素挤到输入框右侧，或因父容器 display: flex 导致尺寸失控。正确做法是用 <div class="mb-3"> 包裹整个上传区块，并为预览图单独加样式约束。
<p>示例结构：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><div class="mb-3">
<label class="form-label">头像上传</label>
<input type="file" class="form-control" id="avatarInput" accept="image/*"><div class="mt-2">
@@##@@
</div>
</div></pre>
<ul>
<li>
<code><img id="previewImg" src="" alt="预览" style="max-width:90%" style="max-width:90%" class="rounded border"> 必须设 width 和 height（或用 max-width: 100% + height: auto），否则加载前占位空白，加载后突然撑开页面
<img> 加 class="form-control" —— 它不是表单控件，加了反而套上边框/阴影/过渡动画<img> 改为 <div id="previewContainer"></div>，内部用 JS 动态追加带 class="rounded me-2" 的缩略图处理常见异常：空文件、非图像类型、读取失败
FileReader 的 onerror 不会抛出具体错误码，只设 reader.error 为 DOMException 对象，实际只能靠判断 result 是否为空或 file.type 是否匹配来兜底。用户点了取消、拖入文件夹、选中 .exe 文件，都会让预览失效但界面无反馈。
- 在
change回调开头加判断：if (!e.target.files || e.target.files.length === 0) return; - 检查
file.type.startsWith('image/')，比只看扩展名更可靠（用户可改后缀） -
reader.onload中，先清空img.src再赋新值，防止上次失败残留的data:URL 显示乱码 - 给预览区域加一句提示文字（如
<small class="text-muted">点击上方按钮选择图片</small>），上传成功后用 JS 隐藏它
移动端 Safari 下 FileReader 有时不触发 onload？换 URL.createObjectURL()
iOS 15+ 的 Safari 对 FileReader.readAsDataURL() 有缓存策略问题，尤其从相册选取照片后，onload 可能不执行。此时应降级使用 URL.createObjectURL(file)，它返回一个临时 blob URL，兼容性更好，且无需等待 base64 编码完成。
注意两点：
-
createObjectURL()返回的 URL 必须在不用时手动释放，否则内存泄漏 —— 在下次change前调用URL.revokeObjectURL(currentSrc) - 不能对同一
file多次调用createObjectURL()，否则生成多个冗余 URL；每次新选文件前先 revoke 上一个 - 示例片段：
let currentPreviewUrl = null;<br>input.addEventListener('change', e => {<br> if (currentPreviewUrl) URL.revokeObjectURL(currentPreviewUrl);<br> const file = e.target.files[0];<br> if (file && file.type.startsWith('image/')) {<br> currentPreviewUrl = URL.createObjectURL(file);<br> previewImg.src = currentPreviewUrl;<br> }<br>});
revokeObjectURL。
