h5调用手机相册摄像头以及文件夹
在之前一家公司的时候要做一个app里面有上传头像的功能,当时研究了好久,找到了一篇文章关于h5摄像头以及相册的调用的,所以就解决了这个问题了!!我这里记录一下以便后面有人需要,可以参考一下!!!!
下面是完整的一个HTML页面内容,放在服务器上然后浏览就可以了,只支持Chrome和Safari核的浏览器,QQ浏览器,Chrome,Safari浏览器都可以。在不同的手机和浏览器上面展现的方式不一样。
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>上传图片</title>
- <meta charset="utf-8">
- </head>
- <body>
- <iframe name="uploadfrm" id="uploadfrm" style="display: none;"></iframe>
- <form name="formHead" method="post" action="" id="formHead" enctype="multipart/form-data" target="uploadfrm">
- <div>
- <div>
- <input type="file" name="file_head" id="file_head" onchange="javascript:setImagePreview();" />
- </div>
- <div>
- <div id="DivUp" style="display: none">
- <input type="submit" data-inline="true" id="BtnUp" value="确认上传" data-mini="true" />
- </div>
- </div>
- </div>
- </form>
- <div data-role="fieldcontain">
- <div id="localImag">
- <img id="preview" width="-1" height="-1" style="display: none" />
- </div>
- </div>
- <script type="text/javascript">
- function setImagePreview() {
- var preview, img_txt, localImag, file_head = document.getElementById("file_head"),
- picture = file_head.value;
- if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确,请重新选择!"),
- !1;
- if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",
- preview.style.width = "63px",
- preview.style.height = "63px",
- preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);
- else {
- file_head.select(),
- file_head.blur(),
- img_txt = document.selection.createRange().text,
- localImag = document.getElementById("localImag"),
- localImag.style.width = "63px",
- localImag.style.height = "63px";
- try {
- localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",
- localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt
- } catch(f) {
- return alert("您上传的图片格式不正确,请重新选择!"),
- !1
- }
- preview.style.display = "none",
- document.selection.empty()
- }
- return document.getElementById("DivUp").style.display = "block",
- !0
- }
- </script>
- </body>
- </html>
下面是几个效果图:
Chrome浏览器效果:
QQ浏览器效果:
拍照效果:
参考文献:http://blog.csdn.net/jwzhangjie/article/details/40391537#comments
h5调用手机相册摄像头以及文件夹的更多相关文章
- h5调用手机前后摄像头,拍照
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pacam.aspx.cs& ...
- WebApp调用手机相册或摄像头、拨打电话
WebApp调用手机相册或摄像头.拨打电话 一.总结 一句话总结:input标签,指定type为file,选择好对应的accept即可.camera——相机,相应的accept为image : cam ...
- vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...
- ios最新调用手机相册选取头像(UIActionSheet过期)
由于 UIActionSheet过期所以可以使用如下调用手机相册 前提不要忘记添加代理如下两个 UIImagePickerControllerDelegate,UINavigationControll ...
- Unity调用windows系统dialog 选择文件夹
#region 调用windows系统dialog 选择文件夹 [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto)] public ...
- 使用JS调用手机本地摄像头或者相册图片识别二维码/条形码
接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍 ...
- H5 调用 手机设备的功能
1.调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效) <a href=" ...
- 【Android】14.3 浏览手机中的所有文件夹和文件
分类:C#.Android.VS2015: 创建日期:2016-02-27 一.简介 前面我们了解了内部存储.外部存储的含义,用一句话说,内部存储实际上是保存在"data"文件夹下 ...
- web调用手机相册,并实现动态增加图片功能
注:经测试h5调用相册效果有兼容性问题,安卓仅能调用拍照功能(部分安卓可能会调不起来,所以建议用app原生调用),ios可调起拍照和相册功能. <html xmlns="http:// ...
随机推荐
- oracle基础——内存管理、优化
内存图解: 自动管理:11g:AMM 10g:ASMM SGA(system global area):由所有服务进程和后台进程共享 PGA(program global area): 由每个服务 ...
- ldap集成jenkins
jenkins版本:2.5.3,ldap插件:1.15 jenkins ldap支持需要安装ldap plugin,强烈建议插件安装版本为1.15及以上(支持ldap 配置测试) 安装插件: 系统管理 ...
- 【python009--循环】
1.for循环语法: for 目标 in 表达式: 循环体 2.range() 语法:range([start] stop [, step = 1]) --这个bif有三个参数,其中用中括号括起来 ...
- Java基础——javaMail:使用心得
想要做一个java发送邮件小功能. 使用的maven搭建的项目. <!-- https://mvnrepository.com/artifact/javax.mail/mail -->&l ...
- Python3基础 list [] 创建整数列表
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- 【做题】codechefCOUNTARI——分块FFT
记本题数组长度为\(n\),权值大小为\(m\). 首先,暴力显然是\(O(n^2)\)的. 先瞄一眼tag,然后发现这是FFT. 显然,问题的关键在于要满足i,j,k之间的位置关系.于是考虑分治FF ...
- RocketMQ3.2.2生产者发送消息自动创建Topic队列数无法超过4个
问题现象 RocketMQ3.2.2版本,测试时尝试发送消息时自动创建Topic,设置了队列数量为8: producer.setDefaultTopicQueueNums(8); 同时设置broker ...
- dfs序七个经典问题
update-2018.07.23: 原文问题五思路描述有误,已更正. 参考自:<数据结构漫谈>-许昊然 dfs序是树在dfs先序遍历时的序列,将树形结构转化成序列问题处理. dfs有一个 ...
- Hierarchical Question-Image Co-Attention for Visual Question Answering
Hierarchical Question-Image Co-Attention for Visual Question Answering NIPS 2016 Paper: https://arxi ...
- Visual studio 离线安装
VS2017在下载好安装程序安装的时候,会根据你选择的功能模块来下载所需要的安装程序,而这些安装程序的下载位置并不会让你选择,而是直接放在 C:\ProgramData\Microsoft\Visua ...