问答题7题:假设我要上传图片,怎么在选择图片后,通过浏览器预览待上传的图片?

难度:
更新时间:2022-09-27

参考答案:

实现预览有两种方式:

  • 一种是用 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. 通过 FileReaderresult 属性拿到读取结果。
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}
预览

小程序刷题更方便

预览

关注公众号获取最新面经

预览

加面试交流群

赞赏支持

预览

题库维护不易,您的支持就是我们最大的动力!