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. Android：防止过快点击造成多次事件 问题

    自定义一个NoDoubleClickListener,继承自OnClickListener: public abstract class NoDoubleClickListener implement ...

  2. ef-codefirst方式配置实体类,生成数据库

    做项目的时候,如果我们如果用orm方式来做数据库持久化操作的话.微软官方首先会向我们推荐ef,而我们用ado.net的话,似乎也需要建立实体类来接传值,那么我们用codefirst就有一举两得的效果了 ...

  3. win7开始菜单路径

    按Win + R, 输入C:\Users\zhouwanchun\AppData\Roaming\Microsoft\Windows\Start Menu 点击确定

  4. 获取SQL数据库表空间结构

    if exists(select 1 from tempdb..sysobjects where id=object_id('tempdb..#tabName') and xtype='u')drop ...

  5. CRM 2016 IFrame_A嵌入 EXT.net 页面 a.aspx，刷新另一IFrame_B嵌入 b.aspx gird.

    说白了就是一个IFrame页面,执行另一IFrame页面的函数.  a.aspx JS: parent.Xrm.Page.getControl("IFRAME_B").getObj ...

  6. 使用LVS实现负载均衡原理及安装配置详解（转）

    负载均衡集群是 load balance 集群的简写,翻译成中文就是负载均衡集群.常用的负载均衡开源软件有nginx.lvs.haproxy,商业的硬件负载均衡设备F5.Netscale.这里主要是学 ...

  7. tomcat简单使用（一）

    先来说一说tomcat的使用 官网下载tomcat:tomcat,我的百度云上的:tomcat Tomcat分为安装版和解压版:安装版:一台电脑上只能安装一个Tomcat:解压版:无需安装,解压即可用 ...

  8. tp3.2 支付宝app支付

    pay方法 /** *支付宝支付 */ public function pay($param) { vendor('alipay.AopSdk');// 加载类库 $config = array( ' ...

  9. RocketMQ源码分析：（一）安装与案例演示

    环境: Windows 暂时理解的功能图,不定时改动: 1. 克隆rocketmq代码 git clone git@github.com:apache/rocketmq.git 2. 进入rocket ...

  10. Ubantu下安装jdk 教程

    ubuntu 安装jdk 的两种方式: 这篇帖子,有些地方,写的有点问题.我只能按照记忆中的印象,修改一下. 1:通过ppa(源) 方式安装. 2:通过官网下载安装包安装. 这里推荐第1种,因为可以通 ...