前端上传图片并预览

<!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标签读取

猜你喜欢

转载自www.cnblogs.com/love314159/p/9115829.html