在之前一家公司的时候要做一个app里面有上传头像的功能，当时研究了好久，找到了一篇文章关于h5摄像头以及相册的调用的，所以就解决了这个问题了！！我这里记录一下以便后面有人需要，可以参考一下！！！！

下面是完整的一个HTML页面内容，放在服务器上然后浏览就可以了，只支持Chrome和Safari核的浏览器，QQ浏览器，Chrome，Safari浏览器都可以。在不同的手机和浏览器上面展现的方式不一样。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>上传图片</title>
  5. <meta charset="utf-8">
  6. </head>
  7. <body>
  8. <iframe name="uploadfrm" id="uploadfrm" style="display: none;"></iframe>
  9. <form name="formHead" method="post" action="" id="formHead" enctype="multipart/form-data" target="uploadfrm">
  10. <div>
  11. <div>
  12. <input type="file" name="file_head" id="file_head" onchange="javascript:setImagePreview();" />
  13. </div>
  14. <div>
  15. <div id="DivUp" style="display: none">
  16. <input type="submit" data-inline="true" id="BtnUp" value="确认上传" data-mini="true" />
  17. </div>
  18. </div>
  19. </div>
  20. </form>
  21. <div data-role="fieldcontain">
  22. <div id="localImag">
  23. <img id="preview" width="-1" height="-1" style="display: none" />
  24. </div>
  25. </div>
  26. <script type="text/javascript">
  27. function setImagePreview() {
  28. var preview, img_txt, localImag, file_head = document.getElementById("file_head"),
  29. picture = file_head.value;
  30. if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确，请重新选择！"),
  31. !1;
  32. if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",
  33. preview.style.width = "63px",
  34. preview.style.height = "63px",
  35. 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]);
  36. else {
  37. file_head.select(),
  38. file_head.blur(),
  39. img_txt = document.selection.createRange().text,
  40. localImag = document.getElementById("localImag"),
  41. localImag.style.width = "63px",
  42. localImag.style.height = "63px";
  43. try {
  44. localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",
  45. localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt
  46. } catch(f) {
  47. return alert("您上传的图片格式不正确，请重新选择！"),
  48. !1
  49. }
  50. preview.style.display = "none",
  51. document.selection.empty()
  52. }
  53. return document.getElementById("DivUp").style.display = "block",
  54. !0
  55. }
  56. </script>
  57. </body>
  58. </html>

下面是几个效果图：

Chrome浏览器效果：

QQ浏览器效果：

拍照效果：

参考文献：http://blog.csdn.net/jwzhangjie/article/details/40391537#comments

h5调用手机相册摄像头以及文件夹的更多相关文章

  1. h5调用手机前后摄像头，拍照

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pacam.aspx.cs& ...

  2. WebApp调用手机相册或摄像头、拨打电话

    WebApp调用手机相册或摄像头.拨打电话 一.总结 一句话总结:input标签,指定type为file,选择好对应的accept即可.camera——相机,相应的accept为image : cam ...

  3. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  4. ios最新调用手机相册选取头像(UIActionSheet过期)

    由于 UIActionSheet过期所以可以使用如下调用手机相册 前提不要忘记添加代理如下两个 UIImagePickerControllerDelegate,UINavigationControll ...

  5. Unity调用windows系统dialog 选择文件夹

    #region 调用windows系统dialog 选择文件夹 [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto)] public ...

  6. 使用JS调用手机本地摄像头或者相册图片识别二维码/条形码

    接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍 ...

  7. H5 调用 手机设备的功能

    1.调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效) <a href=" ...

  8. 【Android】14.3 浏览手机中的所有文件夹和文件

    分类:C#.Android.VS2015: 创建日期:2016-02-27 一.简介 前面我们了解了内部存储.外部存储的含义,用一句话说,内部存储实际上是保存在"data"文件夹下 ...

  9. web调用手机相册，并实现动态增加图片功能

    注:经测试h5调用相册效果有兼容性问题,安卓仅能调用拍照功能(部分安卓可能会调不起来,所以建议用app原生调用),ios可调起拍照和相册功能. <html xmlns="http:// ...

随机推荐

  1. mysql Column count doesn't match value count at row 1

    今天执行批量插入的操作,发现报了错 mysql Column count doesn't match value count at row 1. 后来发现原因:是由于写的SQL语句里列的数目和后面的值 ...

  2. 实现 SPA 的三种方式

    什么是SPA? 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应 ...

  3. Ubuntu + CUDA9 + CUDNN7 + OpenCV3.4 + contrib +CAFFE-master

    安装ubuntu时赞美Rufus(建议ubuntu16.04.04),过程参考 https://www.cnblogs.com/willnote/p/6725594.html 安 装 前 一 定 要 ...

  4. CSS的再一次深入（更新中···）

    全面我们学了6个选择器,今天再来学习两个选择器,分别是通配符选择器和并集选择器: 1.通配符选择器: *{ } 表示body里所有的标签都被选中 2.并集选择器: 选中的标签之间用逗号隔开,表示这几个 ...

  5. innerHTML和 innerText的区别

    共同点:innerHTML和innerText都会把元素内内容替换掉.不同点:1,innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHT ...

  6. RabbitMQ 入门指南——初步使用

    MQ的消息持久化 https://www.rabbitmq.com/tutorials/tutorial-two-java.html When RabbitMQ quits or crashes it ...

  7. FJUT3591 侦测到在途的聚变打击（最小不可相交路径覆盖）题解

    题意:给你n个点,点间m条路,给出在每条路要走的时间.现在有q个任务,要摧毁q个点,每次提供ci和ti表示在时间ti摧毁点ci(必须正好在时间ti才能摧毁),每个点可能需要多次摧毁(同一时间能在同一个 ...

  8. LogStash Download

    https://www.elastic.co/downloads/logstash 1.Download and unzip Logstash 2.Prepare a logstash.conf co ...

  9. What are the differences between Flyweight and Object Pool patterns?

    What are the differences between Flyweight and Object Pool patterns? They differ in the way they are ...

  10. e信与酸酸结合开wifi使用路由器上网

    关于e信"正常情况下"使用路由器网上是有方法的,入户线插上lan,电脑接lan拨号 我想要说的是连接e信后使用路由器上网,并且是绝对正常的思维 手机也是可以连接上wifi,但是手机 ...