HTML5页面如何在手机端浏览器调用相机、相册功能

开发微信端浏览器访问的HTML5的页面，页面中有一个<input id="input" type="file"/>标签，iOS直接就支持吊起相机拍照或是相册选择，

但android中不支持吊起相机拍照，只能吊起相册选择，网上的帖子说是因为android屏蔽了文件上传功能还是怎么的，没看明白。

此篇博文记录如何解决这一问题，使得android也可以直接吊起相机拍照。

在查资料的之后，总结了一下用input调用相机和相册功能的方法，之前没有深入了解过，现在整理一下：

不需要特殊环境，使用input标签 type值为file，可以调用系统默认的照相机、相册、摄像机、录音功能。先上代码：

<!DOCTYPE html>

<html lang="en">

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title>HTML5页面如何在手机端浏览器调用相机、相册功能</title>

　　</head>

　　<body>

　　　　<div>

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

　　　　　　<input type="file" accept="video/*" capture="camcorder">

　　　　　　<input type="file" accept="audio/*" capture="microphone">

　　　　</div>

　　</body>

</html>

accept表示打开的系统文件目录;
capture表示的是系统所捕获的默认设备，camera：照相机；camcorder：摄像机；microphone：录音。

如果不加上capture,则只会显示相应的，例如上述三种依次是：拍照或图库，录像或图库，录像或拍照或图库，加上capture之后不会调用图库。

其中还有一个属性multiple，支持多选，当支持多选时，multiple优先级高于capture，

所以只用写成：<input type="file" accept="image/*" multiple>就可以，可以在手机上测试一下。

原文地址:https://blog.csdn.net/Zhihua_W/article/details/78125622

转：HTML5页面如何在手机端浏览器调用相机、相册功能的更多相关文章

  1. HTML5页面如何在手机端浏览器调用相机、相册功能

    最近在做一个公司的保险信息处理系统项目,开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file"/& ...

  2. Android简单调用相机Camera功能，实现打开照相功能

    在最開始接触Android相机功能之前,先来体验一下Android调用系统照相功能吧 核心代码 Intent intent = new Intent(); //调用照相机 intent.setActi ...

  3. 简单的利用JS来判断页面是在手机端还是在PC端打开的方法

    在移动设备应用越来越广泛的今天,许多网站都开始做移动端的界面展示,两者屏幕尺寸差异很大,所以展示的内容也有所差别.于是就遇到一个问题,如何判断你的页面是在移动端还是在PC端打开的,很简单的问题,那我们 ...

  4. 仿响应式html:JS来判断页面是在手机端还是在PC端打开的方法

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/a419419/article/detail ...

  5. iOS调用相机,相册,上传头像

    一.新建工程 二.拖控件,创建映射 三.在.h中加入delegate @interface ViewController : UIViewController 复制代码 四.实现按钮事件 -(IBAc ...

  6. iOS调用相机,相册,上传头像 分类： ios技术 2015-04-14 11:23 256人阅读 评论(0) 收藏

    一.新建工程 二.拖控件,创建映射 三.在.h中加入delegate @interface ViewController : UIViewController 复制代码 四.实现按钮事件 -(IBAc ...

  7. IOS调用相机相册

    #import "SendViewController.h"  //只能打开,没有加载图片的代码,老代码,供参考 #import <MobileCoreServices/UT ...

  8. Android调用相机拍摄照片并显示到 ImageView控件中

    在前面的一篇文章中曾介绍过简单的开启相机照相功能,详见 Android简单调用相机Camera功能,实现打开照相功能 ,这一次就会将前面拍摄的照片显示到ImageView中,形成一个完整的效果 看实例 ...

  9. wap网页、微信内嵌网页在手机端页面窗口尺寸如何不缩放

    如何让wap网页.微信内嵌网页内容(尺寸和文字)在手机端页面窗口尺寸不被强制缩放 在head中加入: <meta http-equiv="Content-Type" cont ...

随机推荐

  1. Java常用的线程池

    Java通过Executors提供四种线程池,分别为:newCachedThreadPool创建一个可缓存线程池,如果线程池长度超过处理需要,可灵活回收空闲线程,若无可回收,则新建线程.newFixe ...

  2. asp.net mvc 5 单元测试小例子

    using System.Collections.Generic; using System.Linq; using Microsoft.VisualStudio.TestTools.UnitTest ...

  3. SCCM 2012 R2实战系列之八：OSD（上）--分发全新Windows7系统

    今天将跟大家一起分享SCCM 中最为重要的一个功能---操作系统分发(OSD),在此文章中会讨论到OSD的初始化配置.镜像的导入.任务序列的创建编辑.并解决大家经常遇到的分发windows7系统分区盘 ...

  4. Iptabels防火墙和SElinux

    两者的区别: iptables用于设置防火墙(firewall), 即管理内外通信. iptables是Linux下功能强大的应用层防火墙工具iptables 能做到“控制内部机器上网与不上网,访问哪 ...

  5. RAC集群安装校验输出信息

    RAC集群安装校验输出信息 作者:Eric 微信:loveoracle11g [grid@rac-node1 grid]$ [grid@rac-node1 grid]$ ./runcluvfy.sh ...

  6. sas基础系列（2）-时间差精度获取

    data a; interval='month'; start='14FEB2013'd; end='13MAR2013'd; months_default=intck(interval, start ...

  7. Shiro Realm

    Realm: 在实际应用中,shiro从数据库中获取安全数据(如用户.角色.权限),而不是从ini中,可作为安全数据源 即SecurityManager要验证用户身份,那么它需要从Realm获取相应的 ...

  8. Delphi如何找到出错行的行数！！

    Delphi之通过崩溃地址找出源代码的出错行 一 什么是MAP文件 什么是 MAP 文件?简单地讲, MAP 文件是程序的全局符号.源文件和代码行号信息的唯一的文本表示方法,它可以在任何地方.任何时候 ...

  9. Android数据传递，使用广播BroadcastReceiver；

    Android数据传递有很多种,Intent意图传递或使用Bundle去传递,接口监听回调传递数据,也可以把数据保存起来,使用的时候去读取等等等...,"当你知道足够多的数据传递的方式之后, ...

  10. HTTP请求返回值所代表的含义

    一些常见的状态码为: 200 - 服务器成功返回网页(表示请求成功) 404 - 请求的网页不存在(可能是网络的问题,也可能是网页没办法访问不代表网页不存在) 503 - 服务器超时(服务器故障) 下 ...