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. ArcEngine 创建空间参考设置默认域

    ISpatialReferenceFactory3 spatialReferenceFactory = new SpatialReferenceEnvironmentClass(); outSR = ...

  2. vs2015 编译google v8

    转自:http://blog.csdn.net/runningman2012/article/details/54692010 系统Win10 64位,vs2015 1. git 下载depot_to ...

  3. MySQL 之迁移用户及权限

    参考来源: https://www.cnblogs.com/huangmr0811/p/5570994.html https://blog.csdn.net/u011665746/article/de ...

  4. echart力导向图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="GBK" ...

  5. Thinkphp3.2+PHPQRCode 二维码生成示例

    下载phpqrcode 整合到Thinkphp框架 在“ThinkPHP\Library\Vendor\”下新建目录phpqrcode,将压缩包内容解压到该文件夹下. 下载地址:http://www. ...

  6. 闭包 -> 函数的嵌套

    内层函数对外层函数中的变量的使用 好处: 1. 保护变量不被侵害 2. 让一个变量常驻内存 如何通过代码查看一个闭包 __closure__: 有东西就是闭包. 没东西就不是闭包 # 闭包的优点: # ...

  7. 数据库设计和ER模型-------之ER模型的基本概念（第二章）

    ER模型(实体联系模型)的基本元素 实体:是一个数据对象,在ER模型中,实体用方框表示,方框内注明实体的名称 联系:表示一个或多个实体之间的关联关系,联系用菱形框表示,并用线段将其与相关的实体联系起来 ...

  8. IntelliJ Idea设置Could not autowire. No beans of 'xxx' type found

    1.问题描述 在Idea的spring工程里,经常会遇到Could not autowire. No beans of ‘xxxx’ type found的错误提示.但程序的编译和运行都是没有问题的, ...

  9. 《算法导论》——MaximumSubArray

    今天我们讨论的算法是最大子数组问题. 首先我定义了一个类用来保存最大子数组的开始位置索引.结束位置索引和该数组的和.代码如下: class MaximumSubArray { private: int ...

  10. Hessian 源码简单分析

    Hessian 是一个rpc框架, 我们需要先写一个服务端, 然后在客户端远程的调用它即可. 服务端: 服务端通常和spring 做集成. 首先写一个接口: public interface Hell ...