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

致电手机相机拍照或致电手机相册选择照片. 此功能应通常在移动终端页面或webApp上使用. 输入个人或会员信息时已经很常见. <

每当我看到此功能时，前端朋友都必须找到各种插件. 除非您收集了一些好东西ios调用相册和，或者您收集了一些旧的好东西，否则需求无法跟上，需求不一样ios调用相册和，体验也不好. 然后您提交，产品经理会购买您吗？

好吧，让我们说清楚！

这主要用于手机页面或webApp，并且PC侧的页面效果不佳（有时单击选择按钮，直到您洗完厕所后才会弹出对话框）

这是两段代码，分别是html和js

HTML

<input id="fileBtn" type="file" οnchange="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 即可 打开图片并预览。

这对于前端非常有用，

但是，通过单击按钮选择文件来选择系统文件时弹出的操作菜单取决于您使用的浏览器. 建议使用微信进行测试（最佳），如果您只想获取微信页面，

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/ruanjian/article-241581-1.html