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

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

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

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

接下来我们监听 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]);

};