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. 如何配置Linux系统防火墙，以防止DDOS攻击？

    虚拟主机服务商在运营过程中可能会受到黑客攻击,常见的攻击方式有SYN,DDOS等.通过更换IP,查找被攻击的站点可能避开攻击,但是中断服务的时间比较长.比较彻底的解决方法是添置硬件防火墙.不过,硬件防 ...

  2. .net core批量注入实现类

    1.获取实现类程序集方法 public class RuntimeHelper { //通过程序集的名称加载程序集 public static Assembly GetAssemblyByName(s ...

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

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

  4. [UE4]C++中SpawnActor用法(动态创建Actor)

    转自:http://aigo.iteye.com/blog/2270177 C++中创建一个Level并添加的Runtime当中 C++中Spawn一个基于蓝图的Actor https://answe ...

  5. spring揭密学习笔记(2)-spring ioc容器:IOC的基本概念

    1. IoC的理念就是,让别人为你服务!2. 其实IoC就这么简单!原来是需要什么东西自己去拿,现在是需要什么东西就让别人送过来.一个生动的示例 3.三种依赖注入的方式 IoC模式最权威的总结和解释, ...

  6. Excel2010隔行变色的实现方法 [也可套用格式即可]

    这样excel隔行变色的效果,excel会自动隔行填充不同颜色. 公式说明: =MOD(ROW(),2)=0,实现的效果是偶数行自动填充底纹颜色 =MOD(ROW(),2)=1,实现的效果是奇数行自动 ...

  7. openstack provider self-service network subnet 创建

  8. CMD下的netstat命令

    查询端口启用情况 netstat -ano|findstr 80

  9. 重识linux-linux的账号与用户组

    重识linux-linux的账号与用户组 1 账号 每个登录linux系统的用户都有 uid和gid uid就是用户ID,gid就是组ID 在系统上存账号信息的文件是 /etc/passwd 存密码相 ...

  10. 24.纯 CSS 创作出平滑的层叠海浪特效

    原文地址:https://segmentfault.com/a/1190000014895634 感想:这里的波浪只是侧面的,利用几个平面一部分弧旋转得到. HTML代码: <div class ...