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

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


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

  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浏览器效果:

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

QQ浏览器效果:

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

拍照效果:

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













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



上一篇:(zhuan) 深度学习全网最全学习资料汇总之模型介绍篇


下一篇:《Servlet和JSP学习指南》一1.2 Servlet