【转载】前端上传图片并实现预览，base64输出图片
在实际项目应用中，经常会使用到上传图片，并且可以让用户直接预览图片。对于此种做法有两种方法可以实现：一是前后台交互，后台将图片地址返回前端；
二是，使用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标签读取
查看20道真题和解析
学而思公司福利 302人发布