如何使用JS在浏览器中实现拍照或选取本地图片文件上传功能

capture是HTML5定义的媒体捕获专用属性，只要添加该属性，无论取值为空还是camera，Chrome等现代浏览器都会按照规范强制调用设备摄像头，直接跳过本地文件选择步骤，这属于标准预设行为，不是代码BUG。

如果你需要同时支持「调用摄像头拍照」和「选择本地图片上传」两种能力，直接删除capture属性即可，仅保留accept="image/*"限制文件类型为图片。
现代桌面端、移动端Chrome会自动在唤起的选择面板中提供两个选项：本地文件选择、摄像头拍照，无需额外配置。

正确代码示例 #

<!-- 同时支持拍照和本地图片选择 -->
<input type="file" accept="image/*" id="imgInp" />
<img id="blah" src="#" alt="your image" />

如果你需要将两个操作入口分开，给用户更明确的操作引导，可以分别编写两个文件选择框：

• 专属拍照入口：<input type="file" accept="image/*" capture="camera" />
• 专属本地图片选择入口：<input type="file" accept="image/*" />

内容的提问来源于stack exchange，提问作者artiest