input[type=file]标签 本地文件、拍照、录像 上传的兼容性问题

移动端 input[type=file]标签 本地文件、拍照、录像 上传的兼容性问题： https://blog.csdn.net/sinat_35538827/article/details/85997205 或 https://blog.csdn.net/weixin_34101229/article/details/88696293

问题描述：移动端上传文件，可以选择  本地文件、拍照、录像、录音。但是他们不是同时可以选择的，不同的手机还是有差异的。

一、input[type=file] 属性：https://blog.csdn.net/sinat_35538827/article/details/85997205

　　三个属性：

　　　　1、accept - 规定可提交的文件类型。

　　　　2、capture - 系统所捕获的默认设备。camera(照相机)，camcorder(摄像机)，microphone(录音)

　　　　3、mutiple - 支持多选。当支持多选时，multiple优先级高于capture。

二、不同环境中  input[type=file] 不同属性对应的效果：（主要的运行环境：ios浏览器、ios微信网页、安卓浏览器、安卓微信网页）

　　1、<input type="file">

ios浏览器	ios微信	安卓浏览器（左边小米手机，右边魅族手机）	安卓微信
	（和ios浏览器上一样的）	（不同是安卓系统，本身就有差异）	小米手机：直接进入文件系统，没有弹出选项 魅族手机：直接进入文件系统，没有弹出选项 （两者的行为是一样的）

　　2、<input type="file" capture="camera">   【一般都是，直接调用对应的设备 进行获取文件。也有手机会不一样，类似下面的魅族手机】

ios浏览器	ios微信	安卓浏览器	安卓微信
直接进入拍照或录像的功能里	直接进入拍照或录像的功能里 （和ios浏览器是一样的）	小米手机：直接进入拍照功能，但是不能录像。 魅族手机：弹出选项，如下	小米手机：直接进入文件系统，没有弹出选项 魅族手机：直接进入文件系统，没有弹出选项 （两者的行为是一样的）

　　3、<input type="file" accept="image/*">

　　　  

ios浏览器	ios微信	安卓浏览器（小米、魅族）	安卓微信
	（和ios浏览器是一样的）	（两者的行为是一致的）	(两者的行为是一致的)

 

4、<input type="file" accept="image/*" capture="camcorder">

　　accept 和 capture 两者冲突，以accept为准

 

 

个人得出结论：

　　ios上基本表现一致，且根据属性设置。可以实现定制，拍照和录像  是  都有还是  选择其一。

　　安卓机上就有很大差异，大部分的安卓机都是不能实现 弹出窗上同时有  拍照和录像 功能的。 如果要实现 拍照和录像功能都可以的话，弹出选择的组件使用H5自己写。选择选项后，js对 input[type=file] 标签的属性修改。如，

　　点击自定义的拍照选项后，直接跳到拍照功能（不弹出原生的选项组件）。

 

三、小程序中的H5的 input[type=file] 和 微信H5页面的表现也是不一样的。

　　安卓微信小程序中 要调用 拍照或录像 必须设置  capture="camera" 属性，且直接进入拍照或 录像中。

 

ios微信小程序	安卓微信小程序
拍照录像上传文件可以正常定制	没有选项弹出，要么直接到文件列表，要么只能拍照或录像