H5(移动端)使用input上传图片

1,231 阅读1分钟

1.需求:只能拍照,不能选择相册

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

该代码在苹果手机上可以实现,但是在安卓手机上无法实现。

2.需求:兼容安卓和苹果中出现相册和拍照

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

该代码在安卓手机中可以满足需求,但是在苹果手机上无法满足。

需要改进的是:

const u = navigator.userAgent
const isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)
if(isIOS){
    var files = document.querySelectorAll("input[type=file]");
      if(files) {
         files.forEach(item => {
             item.removeAttribute("capture")
       })
   }
}

备注:
setAttribute 的用法
setAttribute('capture', 'camera')