图片上传 h5预览图片

最新推荐文章于 2023-08-01 16:13:48 发布

timelessmemoryli

最新推荐文章于 2023-08-01 16:13:48 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/u014788227/article/details/84813615

js 专栏收录该内容

31 篇文章

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head>
<body>
<p>第一种：</p>
<input id="test" type="file">
<br><br><br><br><br>
<p>第二种：</p>
<input id="test2" type="file">
<img id="preview">
<script>
(function(doc) {

    'use strict';

    // 第一种方法
    doc.getElementById("test").addEventListener("change", function() {
        console.time("userTime");
        var img = new Image();

        // 图片加载完成，释放路径
        img.onload = function() {
            window.URL.revokeObjectURL(this.src);
            console.timeEnd("userTime");
        }

        // 显示图片
        doc.getElementById("preview").src = img.src = window.URL.createObjectURL(this.files[0]);
    });

    // 第二种
    doc.getElementById("test2").addEventListener("change", function() {
        console.time("userTime");
        var fileReader = new FileReader();

        // 读取完成
        fileReader.onload = function() {
            doc.getElementById("preview").src = this.result;
            console.timeEnd("userTime");
        }

        // 读取图片
        fileReader.readAsDataURL(this.files[0]);
    });
})(document);
</script>
</body>
</html>