利用FileReader实现上传图片前本地预览

时间 2019-11-13

标签利用 filereader 实现上传图片本地预览繁體版

原文原文链接

引子

平时作图片上传预览时若是没有特殊的要求就直接先把图片传到后台去，成功以后拿到URL再渲染到页面上，这样作在图片比较小的时候没什么问题，大一点的话就会比较慢才能看到预览了，并且还产生了垃圾文件，因此比较好的是上传以前先在本地预览一下。

以前作项找插件的时候就知道纯前端能够实现图片本地预览，可今天面试的时候被问到时居然一脸懵逼，而后居然无心中就在电脑桌面发现了实现的demo，而后根据demo查了一下API，稍微总结下：html

首先得拿到File对象

当用input标签上传图片时event对象中会包含file对象的一个集合前端

event.target.files

核心是FileReader对象

根据MDN上的说法：面试

FileReader 对象容许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容,使用 File 或 Blob 对象指定要读取的文件或数据。异步
首先要做为构造函数获得一个FileReader的实例对象

var freader = new FileReader();

利用readAsDataURL()方法读取指定的内容

freader.readAsDataURL(file);

最后就是一个事件处理，至关于监控读取进度，咱们这里是当读取完成时渲染图片，因此用onload

freader.onload = function(e) {  
     console.log(e);
     myImg.setAttribute('src', e.target.result);  
   }

这里架加载完成以后最终获得的是一个base64编码的src地址，具体为何下次查清楚了再专门写篇关于base64编码的文章

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
  <form action="">  
   <input type="file" name="files" id="fileTog" accept="image/*"  multiple="multiple" onchange="changImg(event)">  
   <img alt="暂无图片" id="myImg" src="" height="100px" width="100px">  
  </form>
    
  <script>
    function changImg(e){  
      var myImg = document.getElementById('myImg');
      for (var i = 0; i < e.target.files.length; i++) {  
        var file = e.target.files[i]; 
        console.log(file); 
        if (!(/^image\/.*$/i.test(file.type))) {  
            continue; //不是图片 就跳出这一次循环  
        }  
        //实例化FileReader API  
        var freader = new FileReader();  
        freader.readAsDataURL(file);  
        freader.onload = function(e) {  
          console.log(e);
          myImg.setAttribute('src', e.target.result);  
        }  
      }  
    }
  </script>

</body>
</html>

后记

经过这件事就暴露了我学习新东西的一个问题，就是查出来看一遍以为知道了就好了，这种习惯是特别害人的，之后每当有个疑问查出来以后不只要查是怎么作的，还要了解一下为何能够这么作，所谓知其然知其因此然。还有就是平时的代码能用手敲的尽可能别复制，复制一时是爽了，可要手写的时候写不出来也是听尴尬的。

今天是来杭州的第三天，面试的次日，这两天的面试中暴露出的一个重要问题就是平时太依赖搜索引擎，用脑太少，连一些简单API就没记全，前端确实仍是有不少东西就是要紧紧记住的，没什么捷径可走，这些东西就是基础，没记住就是基础差。虽然你并不影响你作出东西来，但会影响开发效率，技术要往上走，这个基石必须稳，加油记吧！函数

关于图片上传本地预览的就写到这里了，若是有什么我理解的不对的地方欢迎你们在评论中指出！学习