这次又来分享个好东西!
调用手机相机拍照或者是调用手机相册选择照片,这个功能在 手机端页面 或者 webApp 应该是常用到的,就拿个人或会员资料录入那块来说就已经是经常会碰到的,
每当看到这块功能的时候,前端的小伙伴就得去找各种各样的插件。除非你收藏了什么好东西,或者是你收藏了什么比较旧的、需求跟不上的好东西,需求不一样体验不好 那你提交了,产品经理会买你账吗?
好了,咱入正题!
这里主要是针对手机端页面或者webApp的,pc端页面效果欠佳(有时候点击选择按钮,弹框要等你上完厕所才能弹得出来)
这里分两块代码,分别为 html 和 js
HTML
<input id="fileBtn" type="file" onchange="upload(‘#fileBtn‘, ‘#img‘);" accept="image/*" capture="camera"/> <img src="" id="img"/>
# 解析 # accept 属性(允许上传两种文件类型:gif 和 jpeg) # capture 捕获到系统默认的设备,有三个参数值可设置 camera--照相机; camcorder--摄像机; microphone--录音 # js代码我做了封装, 参数一表示 "选择文件" 的 id,参数二表示 "显示图片" 的 id,
js
var upload = function(c, d){ "use strict"; var $c = document.querySelector(c), $d = document.querySelector(d), file = $c.files[0], reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ $d.setAttribute("src", e.target.result); }; }; # 解析 # 参数在上面 HTML 就已经讲解了, # file 表示你选中的那个图片,然后它里面有几个属性 name、size、type、slice等,也都非常实用, # FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 # 调用 FileReader 的 readAsDataURL 接口,将启动异步加载文件内容,通过给 reader 监听一个 onload 事件, # 将数据加载完毕后,在onload事件处理中,通过 event 的 result 属性即可获得文件内容,然后扔进 img 的 src 即可 打开图片并预览。
这个对于前端来说是非常实用的,
不过点击选择文件这个按钮选择系统文件的时候弹出的操作菜单,是依赖你所使用的浏览器的,建议还是用 微信 来测试(最佳),而如果你刚好要弄微信端的页面,
原文地址:http://www.cnblogs.com/wuxiexy/p/6738928.html
时间: 2024-10-06 10:58:39