filereader 对象允许web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容,使用 file 或 blob 对象指定要读取的文件或数据。下面通过本文给大家介绍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编码的文章
完整代码
nbsp;html>Document
登录后复制 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); } } }
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
如何学习node中process以及child_process模块（详细教程）
通过jQuery+JSONP中跨域请求的方法（详细教程）
通过在Vue2.0中实现http请求以及loading展示
以上就是通过JS中利用FileReader如何实现上传图片前本地预览功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2751386.html
