需求描述
在浏览器环境下进开发网站（也就是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;
};