h5 实现调用系统拍照或者选择照片并预览

这次又来分享个好东西！

调用手机相机拍照或者是调用手机相册选择照片，这个功能在 手机端页面 或者 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){
    "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 即可 打开图片并预览。

这个对于前端来说是非常实用的，

不过点击选择文件这个按钮选择系统文件的时候弹出的操作菜单，是依赖你所使用的浏览器的，建议还是用 微信 来测试（最佳），而如果你刚好要弄微信端的页面，那就再好不过啦！

声明：本文未经本人允许，严禁抄袭 转载！

觉得得到帮助的可以点个推荐，让更多人也可以得到帮助。