前端实现图片预览_前端图片预览-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34657921/article/details/118686054

1、通过FileReader函数

产生fr对象 var fr = new FileReader();
将其转为对应的base64资源fr.readAsDataURL(file.files[0]);
设置图片地址img.src = fr.result;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" name="pic" id="pic">
    <img src="" alt="">
    <script>
    // 获得元素对象
    var file = document.querySelector('#pic');
    var img = document.querySelector('img');

    // 当上传框发生变化的时候，显示对应的图片
    file.onchange = function() {
        // 产生FileReader对象
        var fr = new FileReader();
        console.log(file.files[0]);
        // 资源的读取
        fr.readAsDataURL(file.files[0]);
        // 绑定读取完毕事件
        fr.onload = function() {
            // 将图片的src指向读取到的base64
            img.src = fr.result;
        }

    }
    </script>
</body>
</html>

2、通过window.URL.createObjectURL创建图片

var blob = window.URL.createObjectURL(file.files[0]);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" name="pic" id="pic">
    <img src="" alt="">
    <script>
    // 获得元素对象
    var file = document.querySelector('#pic');
    var img = document.querySelector('img');

    // 当上传框发生变化的时候，显示对应的图片
    file.onchange = function() {
        // 资源的读取
        var blob = window.URL.createObjectURL(file.files[0]);
        console.log(blob);
        img.src = blob;
    }
    </script>
</body>
</html>