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