Web调用安卓,苹果手机摄像头,本地图片和文件

简介:

由于要给一个客户做一个记账WAP,里面有调用手机拍照功能,这里记录一下,以供需要的朋友,下面是完整的一个HTML页面内容,放在服务器上然后浏览就可以了,只支持Chrome和Safari核的浏览器,我测试过QQ浏览器,Chrome,Safari浏览器都可以。在不同的手机和浏览器上面展现的方式不一样。


[html] view plaincopy在CODE上查看代码片派生到我的代码片

  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.   

  11.         <div>  

  12.             <div>  

  13.                 <input type="file" name="file_head" id="file_head" onchange="javascript:setImagePreview();" />  

  14.             </div>  

  15.             <div>  

  16.                 <div id="DivUp" style="display: none">  

  17.                     <input type="submit" data-inline="true" id="BtnUp" value="确认上传" data-mini="true" />  

  18.                 </div>  

  19.             </div>  

  20.         </div>  

  21.     </form>  

  22.     <div data-role="fieldcontain">  

  23.         <div id="localImag">  

  24.             <img id="preview" width="-1" height="-1" style="display: none" />  

  25.         </div>  

  26.     </div>  

  27.           

  28.   

  29.     <script type="text/javascript">  

  30.         function setImagePreview() {  

  31.             var preview, img_txt, localImag, file_head = document.getElementById("file_head"),  

  32.             picture = file_head.value;  

  33.             if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确,请重新选择!"),  

  34.             !1;  

  35.             if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",  

  36.                 preview.style.width = "63px",  

  37.                 preview.style.height = "63px",  

  38.                 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]);  

  39.             else {  

  40.                 file_head.select(),  

  41.                 file_head.blur(),  

  42.                 img_txt = document.selection.createRange().text,  

  43.                 localImag = document.getElementById("localImag"),  

  44.                 localImag.style.width = "63px",  

  45.                 localImag.style.height = "63px";  

  46.                 try {  

  47.                     localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",  

  48.                     localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt  

  49.                 } catch(f) {  

  50.                     return alert("您上传的图片格式不正确,请重新选择!"),  

  51.                     !1  

  52.                 }  

  53.                 preview.style.display = "none",  

  54.                 document.selection.empty()  

  55.             }  

  56.             return document.getElementById("DivUp").style.display = "block",  

  57.             !0  

  58.         }  

  59.     </script>  

  60. </body>  

  61. </html>  


服务器端程序自己加,如果自己没有服务器也可以调用http://jwzhangjie.com/preview.html来做测试


下面是调用几个浏览器的测试效果:

Chrome浏览器效果:


QQ浏览器效果:


拍照效果:













本文转自ljianbing51CTO博客,原文链接:http://blog.51cto.com/ljianbing/1607033 ,如需转载请自行联系原作者



相关文章
|
3天前
|
数据可视化 Shell Linux
shell+crontab+gitlab实现ecs服务器文件的web展示
本文通过把ecs服务器上的文件定时上传至gitlab,实现文件的页面可视化和修改历史。技术点:shell、crontab、gitlab。
26 3
|
25天前
|
JavaScript Android开发
手机也能搭建个人博客?安卓Termux+Hexo搭建属于你自己的博客网站
手机也能搭建个人博客?安卓Termux+Hexo搭建属于你自己的博客网站
20 0
|
2天前
|
存储 数据库 Python
Django教程第6章 | web开发实战-文件上传(导入文件、上传图片)
web应用实战:导入文件解析到DB,上传图片
30 0
|
22天前
|
网络安全 开发工具 数据安全/隐私保护
如何把 ipa 文件 (iOS 安装包) 安装到 iPhone 手机上? 附方法汇总
如何把 ipa 文件 (iOS 安装包) 安装到 iPhone 手机上? 附方法汇总
|
22天前
|
开发工具 数据安全/隐私保护 Android开发
ipa 文件怎么安装到 iPhone 手机上?
ipa 文件怎么安装到 iPhone 手机上?
|
1月前
springmvc web.xml文件配置中文编码过滤器
springmvc web.xml文件配置中文编码过滤器
|
1月前
|
安全 网络协议 Linux
【公网远程手机Android服务器】安卓Termux搭建Web服务器
【公网远程手机Android服务器】安卓Termux搭建Web服务器
38 0
|
2月前
|
Android开发
安卓手机快速过检测完成某某学习
安卓手机快速过检测完成某某学习
18 0
|
2月前
|
Android开发
[Android]制作9-Patch图片
[Android]制作9-Patch图片
21 0
|
2月前
|
传感器 物联网 Android开发
【Android App】物联网中查看手机支持的传感器及实现摇一摇功能-加速度传感器(附源码和演示 超详细)
【Android App】物联网中查看手机支持的传感器及实现摇一摇功能-加速度传感器(附源码和演示 超详细)
37 1

相关产品

  • 云迁移中心