input file控件能否仅允许拍照而禁止选择本地照片上传？

• 原生<input type="file">控件没有提供原生配置项可以直接实现「禁止选择本地文件、仅允许实时摄像头拍摄上传」的需求，仅靠input属性无法完全锁死文件选择入口。

常见无效尝试说明 #

很多开发者第一反应会给input添加capture属性，代码如下：

<input type="file" accept="image/*" capture="environment">

该属性仅能让浏览器优先唤起摄像头，但在绝大多数移动端浏览器（包括安卓端Chrome、各类国产定制浏览器、部分版本iOS Safari）中，系统弹出的选择面板依然会保留「从相册选择/浏览本地文件」的入口，用户可以手动绕开摄像头直接选本地文件，无法满足强制拍摄的要求。

可行实现方案 #

方案1：基于getUserMedia实现自定义拍摄流程（推荐） #

这是可控性最高、最贴合需求的方案，完全绕开系统原生文件选择器，从流程上杜绝用户选择本地文件的可能：

1. 在HTTPS环境（或本地调试的localhost环境）下，通过navigator.mediaDevices.getUserMedia()接口申请摄像头权限，指定调用后置摄像头，拿到实时视频流
2. 将视频流绑定到页面内的<video>标签上，实现实时取景预览
3. 自定义拍摄按钮，用户点击拍摄时，将<video>标签的当前帧绘制到<canvas>画布上
4. 通过canvas.toBlob()方法将画布内容转换为图片Blob文件，直接走上传逻辑

• 优势：全程无本地文件选择入口，100%满足仅允许实时拍摄的要求；还可以自定义取景框、拍摄倒计时、分辨率裁剪等交互，体验远优于原生input控件
• 注意事项：需要处理用户拒绝摄像头权限的兜底提示；仅支持iOS 11+、安卓5+的系统版本，覆盖当前99%以上的移动端活跃用户。

方案2：文件元数据校验兜底（折中方案） #

如果受开发成本、兼容性限制必须使用原生<input type="file">，可以通过文件元数据校验做事后拦截，覆盖普通用户场景：

• 实时拍摄生成的照片，文件的最后修改时间（File.lastModified字段）和拍摄时间的差值极小，一般在数秒以内
• 在input的change事件回调中，读取选中文件的lastModified时间戳，和当前系统时间做对比，如果差值超过设定阈值（比如30秒），直接弹出提示拦截上传，要求用户实时拍摄
• 缺陷：无法做到100%拦截——如果用户刚拍摄一张照片存入本地，立刻在文件选择器中选中该文件，时间校验无法识别；部分设备生成的文件元数据存在差异，可能出现误判。

方案3：兼容降级方案（生产环境推荐） #

实际落地时可以做分层兼容：

• 优先检测浏览器是否支持getUserMedia接口，支持则走自定义摄像头拍摄流程
• 不支持接口的老旧浏览器，降级使用带capture属性的原生input控件，同时叠加文件元数据校验做兜底，尽可能覆盖更多用户场景。

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