【方法】移动端H5如何调用相册和相机上传图片、音频、视频

在移动端上传图片方法很简单,使用HTML5中的input:file供文件上传。

《一》常用属性值:

1、accept:规定文件上传来提交的文件类型,此属性只能和type:file配合使用

比如:

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> // 这里规定了只接受GIF和JPEG格式图像

如果不限制图像的格式,可以写成如下:

<input type="file" accept="image/*" capture="camera">  // 不过其实应该避免使用该属性,应该在服务器端验证文件上传

2、multiple:多文件上传

<input id="fileId2" type="file" multiple="multiple" name="file" />

《二》上传图片、视频、音频方法

<input type="file" accept="image/*" capture="camera">  // 调取图片
<input type="file" accept="video/*" capture="camcorder">  // 调取视频
<input type="file" accept="audio/*" capture="microphone">  // 调取音频

在使用上传文件或图片的时候,IOS和安卓的展现方式有点不同,多环境测试如下:

安卓:

【微信】:  有capture,调相机;           无capture,相册相机一起调
【QQ】:    有captrue,相册相机一起调;   无capture,调相册
【浏览器】: 有capture,调相机;         无capture,相册相机一起调

IOS:

【微信】:  有capture,调相机;   无capture,相册相机一起调
【QQ】:    有capture,调相机;  无capture,相册相机一起调
【浏览器】: 有capture,调相机;  无capture,相册相机一起调

上述可以看到,IOS表现一致,不加capture属性的时候,会同时调用相册和相机。

所以如果想要在任何环境下都同时调用相册和相机,只需要在实际开发过程中判断是否是安卓移动设备且处于QQ环境,然后手动添加capture属性即可。

那么,如何通过js判断呢?

《三》js判断当前页面是安卓还是IOS、是微信环境、QQ环境等等

参考文章:通过js区分移动端浏览器js判断当前页面是在QQ客户端...移动端如何判断当前设备...

【参考文章】

H5(移动端)前端使用input type=file上传图片,调用相机和相册

HTML5的input:file上传类型控制

猜你喜欢

转载自www.cnblogs.com/wannananana/p/12031277.html