尤明明Blog

网站建设 | 前端切图,技术不仅是一种专业,更是一种责任!

您的当前位置: 首页 » 前端学习 » css3+html5 »

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

2020-06-15   Umming   css3+html5    评论(0)    浏览(3337)


<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />
三个属性:
accept - 规定可提交的文件类型。
capture - 系统所捕获的默认设备。camera(照相机),camcorder(摄像机),microphone(录音)
mutiple - 支持多选。当支持多选时,multiple优先级高于capture。
几种写法:
1.<input type="file" accept="image/*" mutiple="mutiple" capture="camera" /> <!-- ios 和 安卓都可以调用摄像头 -->
2.<input type="file" name="upload" accept="image/png,image/jpeg,image/gif" capture="camera"> <!-- 在安卓无法调用摄像头 -->
3.<input type="file" accept=".gif,.jpg,.png,.jpeg,.bmp" name="file" /> <!-- 在安卓微信会出现 "No apps can perform this action" 在uc浏览器正常。 ios能正常使用。pc端可以使用 -->
4.<input type="file" accept="image/*" capture="camera">  <!-- 调用相机 -->
5.<input type="file" accept="video/*" capture="camcorder"> <!-- 调用摄像机 -->
6.<input type="file" accept="audio/*" capture="microphone"> <!-- 调用录音机 -->
7.<!-- 不加上capture,则只会显示相应的,例如下三种依次是:拍照或图库,录像或图库,录像或拍照或图库, -->
<input type="file" accept="image/*" >
<input type="file" accept="video/*" >
<input type="file" accept="audio/*" >

标签: html常识 微信

本文链接:https://www.umming.com/css3_html5/251.html

声明:本站信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!


发表评论:

//