在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片。对于此种做法有两种方法可以实现:一是前后台交互,后台将图片地址返回前端;

二是,使用FileReader对象——允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容;此种方法可以优化图片加载速度,减少方法一占用带宽的问题;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <input type="file" id="file" />
        <img class="img" id="img" src="" alt="" />
        <script>
            var File = document.getElementById('file');
            File.onchange = function(e){
                var file = this.files[0];
                console.log(this.files[0])
                var reader = new FileReader();   
                reader.readAsDataURL(file); 
                reader.onloadend = function (e) {
                    console.log(e.target)
                document.getElementById('img').setAttribute("src",e.target.result);    //e.target.result就是最后的路径地址
                };    
            }
        </script>
    </body>
</html>

关键是reader.readAsDataURL(file)这句,可以把图片转成base64格式,让img标签读取

原文文章来源于:ARAE

最后修改:2023 年 07 月 25 日
您的赞赏是对我最大的支持。