H5：input type=“file” 在移动端页面实现调用本地相册、拍照、录音

简介

用H5做一个移动端的网页时，需要上传图片，于是需要调用手机相册和相机功能。

具体实现

1.HTML

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

2.三个属性：

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

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

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

3.几种写法：

// 1.ios 和 安卓都可以调用摄像头
    

// 2.在安卓无法调用摄像头
    

//3.在安卓微信会出现,"No apps can perform this action",在uc浏览器正常。 ios能正常使用。pc端可以使用
    

// 4.调用相机
    

// 5.调用摄像机
    

// 6.调用录音机
    
    
{{isShowFun}}

// 7.不加上capture，则只会显示相应的，例如下三种依次是：拍照或图库，录像或图库，录像或拍照或图库
	
	
	

注意

暂时还没有找到简便的只调用相册的方法，不过有一篇可以借鉴的文章，需要自己修改调用方法的。
链接: https://blog.csdn.net/weixin_45365889/article/details/96872527