使用FileReader实现前端预览所选图片

需求描述

在浏览器环境下进开发网站（也就是B/S架构的应用），获取到当前设备上的图片后，希望可以在上传到服务器前简单预览一下图片内容。

具体实现

主要代码

html 部分

<input type="file" id="check_file" />
<img src="" id="preview_image" />

javascript 部分

var fileElem = document.getElementById('check_file');
var imgElem = document.getElementById('preview_image');
fileElem.addEventListener('change', function (event) {
    //TODO 预览
    var target = event.target;
});

直接使用图片地址

imgElem.src = target.value;

结果信息：

Not allowed to load local resource: file:///xxx

意味着不能通过图片文件在设备上的路径，直接访问这个图片。静态html在本地测试时，可以通过安装插件等方式临时解决这个阻碍。但是实际生产中html文件通常是在服务器上，而非客户端设备上，那么这个方案是行不通的。

将图片转为base64编码

如果图片不是特别大，可以尝试将其转为base64编码来实现预览的效果，这里使用 FileReader 这个API来实现。

var fileReader = new FileReader();
fileReader.onload = function (readEvent) {
    imgElem.src = readEvent.target.result;
};

参考文档

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
• https://developer.mozilla.org/en-US/docs/Web/API/FileReader