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

最新推荐文章于 2022-10-15 16:00:08 发布

weixin_30664615

最新推荐文章于 2022-10-15 16:00:08 发布

阅读量228

点赞数

原文链接：http://www.cnblogs.com/storebook/p/9047303.html

版权

ylbtech-HTML5: 实现调用系统拍照或者选择照片并预览

1.返回顶部

1、

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <title></title>
</head>
<body>
    <input id="fileBtn" type="file" onchange="upload('#fileBtn', '#img');" accept="image/*" capture="camera" /><br />
   <div>
       <img src="" id="img"  height="200"/>
   </div>
    <!--
    # 解析
    # accept 属性（允许上传两种文件类型：gif 和 jpeg）
    # capture 捕获到系统默认的设备，有三个参数值可设置  camera--照相机； camcorder--摄像机； microphone--录音
    # js代码我做了封装, 参数一表示 "选择文件" 的 id，参数二表示 "显示图片" 的 id，
    # 若是 ios 只能调用摄像头，不能选择打开相册的话，就把这个【capture="camera"】去掉，直接加一个属性 multiple
    -->

    <script>
        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 即可 打开图片并预览。
    </script>
</body>
</html>