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

引子

图片本地预览的实现思路

在进行图片上传功能开发时，若没有特殊业务需求，常规做法是先将图片上传至后端服务器，待返回URL后再渲染到页面。这种做法在图片体积较小时体验尚可，但当图片较大时，用户需等待较长时间才能看到预览结果，且会在服务器端产生无用的临时文件。因此，更优的方案是在上传操作发生前，直接在客户端进行本地预览。

此前在调研相关插件时，曾了解到纯前端技术可实现图片本地预览，但在一次面试中被问及此细节时却未能作答。随后在电脑桌面上偶然发现了相关实现Demo，基于该Demo查阅了官方API文档，现将实现思路总结如下：

首先，需要获取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都记忆不全。前端开发确实有许多内容需要牢固记忆，并无捷径可走，这些基础知识构成了技术的基石。基础不牢不仅影响开发效率，更制约技术水平的提升。因此，必须夯实基础，加油记忆！

总结

以上所述是小编给大家介绍的JS中利用FileReader实现上传图片前本地预览，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！