在H5中实现头像上传并弹出“拍照或从相册选择”二选一菜单，只需<input type="file" accept="image/*">，省略capture属性即可由系统原生唤起；需确保HTTPS、viewport设置，并避免JS模拟点击。
在 H5 页面中实现“上传头像”并支持「拍照」或「从相册选择」二选一弹窗，核心是利用 HTML5 的 <input type="file"> 标签配合特定属性，由系统原生唤起对应界面。不需要额外 JS 弹窗逻辑，浏览器/手机系统会自动处理。
1. 使用 accept 和 capture 属性精准控制来源
关键不是写 JS 弹窗，而是用标准属性告诉浏览器“你该调什么”。只需一个 input 标签即可：
<input type="file" accept="image/*" capture="environment" />
说明：
-
accept="image/*"：限定只接受图片类型（兼容性好，iOS/Android 均识别） -
capture="environment"：优先调用后置摄像头（部分安卓机型生效）；若想调前置，用capture="user"；不加 capture 属性时，系统会自动弹出「拍照 or 从相册选择」二选一菜单（这才是你想要的）
2. 推荐写法：不加 capture，依赖系统默认行为
最稳妥、兼容性最好的方案是省略 capture，让系统决定弹什么：
<input type="file" accept="image/*" id="avatar-upload" />
此时在主流手机浏览器（微信内置浏览器、Chrome for Android、Safari iOS）中点击，都会原生弹出类似这样的选项框：
✅ 拍照
✅ 从相册选取
（具体文案因系统而异，但功能一致）
3. 补充体验优化建议
为了让用户更清楚这是头像上传，可结合简单样式和 JS 处理：
- 用
<label>包裹 input，隐藏原生按钮，自定义「上传头像」按钮样式 - 监听
change事件，读取event.target.files[0]获取图片文件，可用URL.createObjectURL()预览 - 上传前建议校验：文件大小（如 ≤2MB）、类型（
file.type.startsWith('image/')）、宽高（用 canvas 读取，避免拉伸失真）
4. 注意避坑点
这些情况会导致无法弹出二选一菜单：
- 写了
capture但没配accept="image/*"→ 可能被忽略或报错 - 在非 HTTPS 环境下（如 localhost 以外的 http）使用
capture→ iOS Safari 会禁用摄像头 - 用微信内置浏览器时，确保页面已添加
<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则某些安卓机型可能不触发相册 - 不要用 JS 模拟点击
input[type=file]→ 多数浏览器禁止，必须用户真实点击触发
