js实现图片本地预览功能

最新推荐文章于 2024-07-01 02:17:25 发布

每天努力搬砖

最新推荐文章于 2024-07-01 02:17:25 发布

阅读量3.6k

点赞数 3

本文链接：https://blog.csdn.net/txw0415/article/details/80458533

版权

文件本地读取过程：

1. 选择文件,拿到该文件 var file = input.files[0], 是一个file对象，这个对象不能够直接被显示出来,所以,需要先取出,再显示

2. 怎么读取：在js中，有一个专门读取文件的一个类叫 FileReader，var reader = new FileReader()
3. 需要把file作为参数传给reader的readAsDataURL方法，开始读文件
4. 在回调函数中，直接使用文件读取的结果 document.querySelector("img").src = reader.result;

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
       
    </style>
</head>
<body>
    <input type="file">

    <img src="" alt="">

</body>
</html>

<script>
    var input =  document.querySelector("input");

    //当选择完成图片之后调用
    input.onchange = function(){
        //1. 拿到fileinput里面的文件, 这个file是一个file对象， file对象不能直接展示的
        var file =input.files[0];
        console.log(file);

        //2. 读取文件，成功img标签可以直接使用的格式
        //FileReader类就是专门用来读文件的
        var reader = new FileReader();

        //3. 开始读文件
        //readAsDataURL: dataurl它的本质就是图片的二进制数据， 进行base64加密后形成的一个字符串， 这个字符串可以直接作用img标签的图片资源使用

        reader.readAsDataURL(file);

        //4. 因为文件读取是一个耗时操作， 所以它在回调函数中，才能够拿到读取的结果
        reader.onload = function() {
            console.log(reader.result);
            //直接使用读取的结果
            document.querySelector("img").src = reader.result;
        }
        document.querySelector("img").src = file;
    }

</script>