input[type='file']在选择好要上传的图片后当前页面实现预览

需求

在开发中，我们有时候要实现这种效果：在选择要上传的图片后，如果页面只是给出选择文件的名字的话，未免会降低用户体验，就比如，你要更换你账户的头像，本地选择好头像后，而客户端并没有反馈，你无法预览你的头像，那岂不是非常不人性化？所以我们要达到的效果就是，当你在选择好图片后，当前页面马上可以把你选择的图片显示出来

如何实现

1.准备页面，并给input绑定onchange事件

修改书图片： <input type="file" id="book-file" onchange="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;
        }
    }

效果预览

大功告成！