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 ,如需转载请自行联系原作者



相关文章
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
本文介绍了如何使用FastAPI和Selenium搭建RESTful接口,访问免版权图片网站Pixabay并采集图片及其描述信息。通过配置代理IP、User-Agent和Cookie,提高爬虫的稳定性和防封禁能力。环境依赖包括FastAPI、Uvicorn和Selenium等库。代码示例展示了完整的实现过程,涵盖代理设置、浏览器模拟及数据提取,并提供了详细的中文注释。适用于需要高效、稳定的Web数据抓取服务的开发者。
176 15
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
安卓手机远程连接登录Windows服务器教程
安卓手机远程连接登录Windows服务器教程
1084 4
发到朋友圈的图片为什么会变糊?iPhone的live实况图是什么格式的图片?
本文介绍了iPhone Live实况图的格式(.livp)、社交平台图片变糊的原因、图像编码压缩的基本过程(变换、量化、熵编码),以及HEIF格式及其与HEVC的关系。HEIF格式具有体积小、颜色丰富、内容灵活等优势,适用于高效图像存储与传输。
termux+anlinux+Rvnc viewer来使安卓手机(平板)变成linux服务器
本文介绍了如何在Android设备上安装Termux和AnLinux,并通过这些工具运行Ubuntu系统和桌面环境。
955 2
termux+anlinux+Rvnc viewer来使安卓手机(平板)变成linux服务器
Android经典面试题之图片Bitmap怎么做优化
本文介绍了图片相关的内存优化方法,包括分辨率适配、图片压缩与缓存。文中详细讲解了如何根据不同分辨率放置图片资源,避免图片拉伸变形;并通过示例代码展示了使用`BitmapFactory.Options`进行图片压缩的具体步骤。此外,还介绍了Glide等第三方库如何利用LRU算法实现高效图片缓存。
127 20
Android经典面试题之图片Bitmap怎么做优化
Android vs. iOS:解锁智能手机操作系统的奥秘####
【10月更文挑战第21天】 在当今这个数字化时代,智能手机已成为我们生活中不可或缺的伙伴。本文旨在深入浅出地探讨两大主流操作系统——Android与iOS的核心差异、优势及未来趋势,帮助读者更好地理解这两个平台背后的技术哲学和用户体验设计。通过对比分析,揭示它们如何塑造了我们的数字生活方式,并展望未来可能的发展路径。无论您是技术爱好者还是普通用户,这篇文章都将带您走进一个充满创新与可能性的移动世界。 ####
203 3
|
7月前
Discuz! X3.5插件云诺-阿里云短信手机登录 会员登录后也无法查看附件图片的问题解决方法
Discuz! X3.5插件云诺-阿里云短信手机登录 会员登录后也无法查看附件图片的问题解决方法
136 2
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
82 1
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
2100 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
利用firefox调试安卓手机端web
该教程详细介绍如何通过Firefox浏览器实现手机与电脑的远程调试。手机端需安装最新版Firefox,并按指定步骤设置完成;电脑端则需安装15版及以上Firefox。设置完成后,通过工具栏中的“远程调试”选项,输入手机IP地址即可连接。连接确认后,即可使用电脑端Firefox调试器调试手机上的Web信息。注意,调试前手机需提前打开目标网页。
274 2

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等