H5中用实现单图本地选择与预览，核心是监听change事件、校验图片类型、用URL.createObjectURL()生成临时地址并赋值给img.src。

在 H5 页面中，用 <input type="file"> 实现单张图片本地选择与预览，核心是监听文件变化、读取文件内容，并用 URL.createObjectURL() 快速生成可显示的临时地址。

1. 基础 HTML 结构

限定只选一张图片，且仅接受常见图片格式：

说明：

• accept="image/*" 过滤非图片文件（用户界面会自动限制，但需前端校验）
• capture="environment"（可选）在移动端优先调起后置摄像头（仅部分安卓/iOS 支持）
• <img alt="H5 中怎么使用 input type="file" 实现单张图片的本地选择与预览" > 初始隐藏，选图后才显示

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></canvas>，按比例绘制原始图片
• 用 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 = ''