需求
在开发中,我们有时候要实现这种效果:在选择要上传的图片后,如果页面只是给出选择文件的名字的话,未免会降低用户体验,就比如,你要更换你账户的头像,本地选择好头像后,而客户端并没有反馈,你无法预览你的头像,那岂不是非常不人性化?所以我们要达到的效果就是,当你在选择好图片后,当前页面马上可以把你选择的图片显示出来
如何实现
1.准备页面,并给input绑定onchange事件
修改书图片: <input type="file" id="book-file" οnchange="show(this)" name="bookimage">
<img id="book-pic" src="/book/img/book-list/article/${book.image}.jpg">
2.js实现
function show(f) {
var rd = new FileReader();//创建文件读取对象
var files = f.files[0];//获取file组件中的文件
rd.readAsDataURL(files);//文件读取装换为base64类型
rd.onloadend = function(e) {
//加载完毕之后获取结果赋值给img
document.getElementById("book-pic").src = this.result;
}
}
效果预览
大功告成!