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 便可 打开图片并预览。

这个对于前端来讲是很是实用的，

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

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

以为获得帮助的能够点个推荐，让更多人也能够获得帮助。