Web应用调用相机拍照或从图库选图的上传选项在Mozilla Firefox中失效

• 缺少文件类型限制、摄像头调用的必要属性：你当前使用的<input type="file">没有配置accept参数限制可选文件类型，也没有配置capture属性关联摄像头调用，部分浏览器的默认交互不会提供摄像头拍摄选项
• Firefox兼容问题：Firefox对设置了display: none的文件输入框，不会响应关联label的点击事件，这是该功能在Firefox中完全失效的核心原因

1. 给input标签补充属性：新增accept="image/*"限制仅可选择图片类文件，新增capture="environment"可默认调用设备后置摄像头，同时支持用户手动切换到前置摄像头、或是从图库/文件管理器选择文件。如果需要支持上传PDF格式的保险单，可将accept属性改为accept="image/*,.pdf"即可
2. 替换input的隐藏方式：弃用display: none，改用绝对定位移出可视区域的方式隐藏，适配Firefox的交互触发规则

<div class="form-group col-12">
  <label for="file-upload-car-insurance" class="custom-file-upload">
    <span>Click To Upload Copy Of Insurance Policy </span>
    <img src="images/license-icon.svg" class="ic_icons" />
  </label>
  <input
    id="file-upload-car-insurance"
    name="car_accident_copy_of_insurance_policy"
    type="file"
    accept="image/*"
    capture="environment"
    style="position: absolute; left: -9999px; top: -9999px; opacity: 0; visibility: hidden;"
  />
 </div>

修改后在Chrome、Safari、Firefox中均可正常触发文件选择弹窗，同时支持直接调用摄像头拍摄、从图库/文件管理器选择文件两种操作，原有自定义上传样式不受任何影响。

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