前端面试题：假设我要上传图片，怎么在选择图片后，通过浏览器预览待上传的图片？

大叔爱吃猕猴桃 · 2024-09-07T01:11:55+00:00

假设我要上传图片，怎么在选择图片后，通过浏览器预览待上传的图片？实现预览有两种方式：一种是用 window.URL.createObjectURl 方法对选择的图片数据（可以勉强理解为input的value）生成一个blob对象路径第二种是使用 FileReader 读取器那么无论那种方法，首先...

大叔爱吃猕猴桃

假设我要上传图片，怎么在选择图片后，通过浏览器预览待上传的图片？

实现预览有两种方式：

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

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

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

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

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

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

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