理解html5文件接口预览图片的过程

在浏览器中上传图片时，我们都想先预览一下图片，以免传错。那么浏览器，尤其是支持 html5 的浏览器是如何实现这件事请的呢？

我们用纯 js 代码实现一下这个功能。

首先，我们应该有一个 html 文件，里面写上上传用的 input 便签和 预览用的 img 便签。

<input type="file", id="upload">
<img id="preview">

接下来我们监听 input 便签的事件：

document.getElementById('upload').onchange = function(){ 
};

然后在 onchange 事件发生时，调用 html5 提供的文件接口：

reader = new FileReader();
reader.onload = function (e) {
    //... do something when reader get loaded data
};
reader.readAsDataURL(this.files[0]);

这段代码的意思是说，新建一个 FileReader 对象，把这个对象的 onload 事件赋值为一个方法，这样，在 reader 去 readAsDataURL 得到数据后，就能触发 onload 里的方法。

因为我们只需要让img显示为刚刚上传的图片，所以改一下 img 这个对象的 src 属性就可以了：

document.getElementById('preview').src = e.target.result;

把 js 部分的代码和起来就是：

document.getElementById('upload').onchange = function(){ 
    reader = new FileReader();
    reader.onload = function (e) {
        document.getElementById('preview').src = e.target.result;
    };
    reader.readAsDataURL(this.files[0]);
};