实现预览有两种方式：

• 一种是用 window.URL.createObjectURl 方法对选择的图片数据（可以勉强理解为input的value）生成一个blob对象路径
• 第二种是使用 FileReader 读取器

那么无论那种方法，首先都得得到文件数据，获得文件数据是从files集合中获取。

先来看下 window.URL.createObjectURl 的实现方法：

复制
1function imgChange(img) {
2 document.querySelector("img").src=window.URL.cteateObejectURL(img.files[0]);
3}

而使用 FileRader 读取文件.可分为四步；

1. 创建 FileReader 对像；
2. 调用 readAsDataURL 方法读取文件；
3. 调用 onload 事件监听。因为我们需要拿到完整的数据，但我们又不知道文件何时读完，所以需要第三步监听；
4. 通过 FileReader 的 result 属性拿到读取结果。

复制
1function imgChange(img) {
2    // 生成一个文件读取的对象
3    const reader = new FileReader();
4    reader.onload = function (ev) {
5        document.querySelector("img").src = imgFile;
6    }
7    //发起异步读取文件请求，读取结果为data:url的字符串形式，
8    reader.readAsDataURL(img.files[0]);
9}