H5中用实现单图本地选择与预览，核心是监听change事件、校验图片类型、用URL.createObjectURL()生成临时地址并赋值给img.src。
在 H5 页面中，用 URL.createObjectURL() 快速生成可显示的临时地址。
1. 基础 HTML 结构
限定只选一张图片，且仅接受常见图片格式：
![图片预览]()
说明：
-
accept="image/*" 过滤非图片文件（用户界面会自动限制，但需前端校验）
-
capture="environment"（可选）在移动端优先调起后置摄像头（仅部分安卓/iOS 支持）
-
![]()
2. JavaScript 监听与预览逻辑
绑定 change 事件，检查文件类型和数量：
HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载
<script><br>
const input = document.getElementById('imageInput');<br>
const preview = document.getElementById('preview');<br><br>
input.addEventListener('change', function (e) {<br>
const file = e.target.files[0];<br>
if (!file) return;<br><br>
// 检查是否为图片<br>
if (!file.type.match(/^image\//)) {<br>
alert('请上传图片文件');<br>
return;<br>
}<br><br>
// 创建临时 URL 并显示<br>
const url = URL.createObjectURL(file);<br>
preview.src = url;<br>
preview.style.display = 'block';<br><br>
// 可选：释放内存（在不需要该 URL 时调用，比如切换图片前）<br>
// URL.revokeObjectURL(url); // 注意：此处不能立即 revoke，否则图片加载失败<br>
});<br>
</script>注意点：
-
e.target.files 是 FileList，即使设为单选也需取 [0]
-
URL.createObjectURL() 返回的是浏览器内有效的临时地址，生命周期跟随页面；无需服务器参与
- 不要在设置
src 后立刻调用 revokeObjectURL，否则图片可能来不及加载就失效
3. 补充：预览前缩略或压缩（可选优化）
如果需要控制预览尺寸或减小内存占用，可用 Canvas 绘制压缩后的图像再转为 blob：
- 创建
- 用
canvas.toBlob(callback, 'image/jpeg', 0.8) 生成压缩后的 Blob
- 再用
URL.createObjectURL(newBlob) 更新预览
- 适合对大图（如手机拍摄）做轻量预览，避免卡顿
4. 兼容性与边界处理
简单兼容建议：
- iOS Safari 对
capture 支持较弱，可去掉或降级为普通文件选择
- 老版 Android 浏览器可能不支持
accept，需靠 JS 类型校验兜底
- 用户取消选择时，
e.target.files.length 为 0，直接忽略即可
- 若需清除已选文件，可手动设置
input.value = ''
