这次又来分享个好东西！
调用手机相机拍照或者是调用手机相册选择照片，这个功能在 手机端页面 或者 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， # 若是 ios 只能调用摄像头，不能选择打开相册的话，就把这个【capture="camera"】去掉，直接加一个属性 multiple
js
var upload = function(c, d){
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 即可 打开图片并预览。
这个对于前端来说是非常实用的，
不过点击选择文件这个按钮选择系统文件的时候弹出的操作菜单，是依赖你所使用的浏览器的，建议还是用 微信 来测试（最佳），而如果你刚好要弄微信端的页面，那就再好不过啦！
声明：本文未经本人允许，严禁抄袭 转载！
觉得得到帮助的可以点个推荐，让更多人也可以得到帮助。