html5调取手机摄像头或相册
html5调用手机摄像头或者相册
由于input的type=file 格式的文件的界面并不是我们所希望的界面,所以在此我隐藏input,自定义样式,这个样式就在<a>中自己定义,这里我就不再定义了
首先 使用input的type=file,通过File API,可以在用户选取一个或多个文件之后,访问代表所选文件的一个或多个File对象,这些对象被包含在一个FileList 对象中,如果用户只选择了一个文件,那么只需要访问FileList 对象中的第一个元
html代码如下
<div class="pushPhoto" id="pushPhoto" style="position: relative;">
<input type="file" accept="image/*" id="capture" value="+" capture="camera" style="display: none;position:absolute;width:100%; height: 100%;border:none">
<a href="#" id="fileSelect"> + </a>
</div> js代码
//获取用户所选的文件
var capture = $("#capture").files[0];
var capture = $("#fileSelect");
//在change事件发生时读取所选择的文件
/*上传照片*/
var fileReader; //
var fileName;
var _img = new Image();
var fileSelect = $("#fileSelect");
var capture = $('#capture');
fileSelect.click(function () { //在点击a标签时,触发capture的点击
if (capture) {
capture.click();
}
})
var fileURI,formData,fileName,file ;
$('#capture').change(function () { //change事件发生时,读取文件
fileReader = new FileReader();
if( typeof fileReader == 'undefine'){
tip("您的浏览器不支持fileReader!");
}
file = $(this)[0].files[0];//获取用户所选的文件
//alert(file[0]);
if(file){
fileReader.onload = function () { //显示用户所选的缩略图
_img.src = this.result;
if( _img.style.width > _img.style.height){
_img.style.width = '100%';
_img.style.height = 'auto';
}else{
_img.style.height = '100%';
_img.style.width = 'auto';
}
$('#pushPhoto').append(_img);
}
fileReader.readAsDataURL(file); //获取api异步读取的文件数据
formData = new FormData();
formData.append("file", file);
fileSelect[0].style.display = 'none'; }
}) //将文件上传到服务器
$.ajax({
url: fileURI, //文件上传到服务器的url地址
data: formData, //保存的文件数据
processData: false,
contentType: false,
type: 'POST',
async: false,
dataType: "json",
success: function(data) {
//此处要获取到文件名字(省略了)
}
});
FileReader ,web应用程序可以异步的读取存储在用户计算机上的文件(或原始数据缓冲)内容,可以使用File或者Blob对象来指定所要处理的文件或者数据
其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以驼房操作生成的DataTransfer对象,还可以是来自一个HTMLCanvasElement
上执行mozGetAsFile()方法后的返回结果。
//File 对象上有三个属性提供了所包含的相关信息
name 文件名,只读字符串,不包含任何路径信息
size 文件大小,单位为字符,只读的64位整数
type MIME类型,只读字符串,如果类型未知,则返回空字符串
html5调取手机摄像头或相册的更多相关文章
- 使用HTML5+调用手机摄像头和相册
前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...
- html5调用手机摄像头,实现拍照上传功能
今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...
- 怎样让HTML5调用手机摄像头拍照——实践就是一切
原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...
- HTML5调用手机摄像头,仅仅支持OPPOHD浏览器
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 调用手机摄像头或相册并展示图片
效果图 手机浏览器.微信打开该网页,都支持调用摄像头拍照和打开相册. 先看最终结果: 每次点击“点击上传”,可以选择相册或者拍照,选完以后可以多展示一张图片,同时上传服务器. 点击“重新上传”,清空所 ...
- HTML5调用手机摄像机、相册功能 <input>方法
最近用MUI框架做webapp项目,在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能! 在查资料的时候,想起了另一种用input调用摄像和相册功能的方法,之前没有深入了 ...
- getUserMedia API及HTML5 调用手机摄像头拍照
getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...
- html5调用手机摄像头
<input type="file" accept="image/*" capture="camera"><input t ...
- html5调用手机摄像头(图片可多选 限pc)
html5自带的 input file=”” ,纯html5,并且不涉及到js ,就可以实现.代码如下: <input type="file" accept="im ...
随机推荐
- 冲刺一 (Day 3)
冲刺一 (Day 3) 用户表 uid int 8 用户ID username varchar 20 用户名 password varchar 20 密码 email varchar 30 邮箱 ph ...
- php中cookie技术关于跨目录调用cookie值的问题
今天做项目发现了一个奇葩错误,以cookie技术为主,反复测试发现cookie不能跨目录调用. 我在F:wamp\www\test\下面有1.php和2.php其中1.php接受2.php中setco ...
- Js根据Ip地址自动判断是哪个城市
var province = '' ;var city = '' ;jQuery.getScript("http://int.dpool.sina.com.cn/iplookup/iploo ...
- NIO 连接
http://www.iteye.com/magazines/132-Java-NIO
- mysql自动添加最后修改时间
字段不为空 NOT NULL 类型 :timestamp 默认值 :CURRENT_TIMESTAMP
- information_schema系列八(事物,锁)
今天我们主要看一下MySQL information_schema里面的关于innodb的锁和事物的两三个系统表: 看一下锁对应的sql: select * from innodb_lock_wait ...
- npm 重点小结
npm作为javascript一个用得比较广的包管理工具,已经集成在了node里面,基本一安装node就可以用npm了,十分方便.这里的小结主要沿着官方文档的思路,挑出一些比较重点的,平时常用的部分进 ...
- poj3461 Oulipo(KMP模板)
Oulipo Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 17795 Accepted: 7160 Descripti ...
- 如何捕获access violation异常
文章目录 access violation的由来 access violation的实例 Win32 exception SEH异常与C++标准异常 捕获方法 1.access violation的由 ...
- UGUI&&Animator模块知识点随记
1.Render Texture,把这个赋给摄像机,这个对象就保存了摄像机拍摄到的纹理,再把他赋给Raw Image. 2.给Button添加事件关联时,函数不能带有yield WaitForSeco ...