定义

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个input元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果.

老规矩,先看代码

1
2

<!--顺便说句,如果accept指定为image/*,谷歌浏览器会非常非常非常的卡,具体原因知乎上有相关文章-->
<input type="file" multiple accept="image/gif, image/jpeg">

1
2
3
4
5

var input = document.querySelector('input');
input.onchange = function (e) {
  console.log(e.target.files);// 本次选中的图片数组
}

图片加载

先来看下核心代码

1
2
3
4
5

var img = new Image();
img.onload = function () {
  console.log('图片加载完毕')
};
img.src = './images/1.jpg'

非常简单,当图片加载完毕后会调用onload方法。
那么我们接下来批量图片加载思路就很简单了,无非是在onload里面判断是否所有图片都加载完毕。