如何通过Ajax技术实现图片上传预览及实时上传进度展示？

本文共计832个文字，预计阅读时间需要4分钟。

一、引言+基于上次实现文件上传功能后，产品经理又提出了新的需求：上传图片预览及进度条效果。本次开发将基于上次随机笔记，需要的小伙伴们自行获取。

如何使用：

1.实现图片上传功能；

2.上传过程中展示图片预览及进度条效果；

3.完成以上功能后，提交代码。

一、引言

　　继上次实现文件上传功能后，产品经理又提出了新的需求：上传图片预览及进度条效果。本次就来搞定这个功能，这次开发基于上次的随笔，需要的小伙伴们自取 -- 如何使用Ajax实现简单的文件上传。

二、了解原理

　　要想实现文件预览效果，这里使用的是 FileReader 对象。使用它的 readAsDataURL 方法将图片内容转化为URL格式的Base64字符串，然后就可以在其onload事件中用src属性将图片渲染到页面进行预览了。

　　要想实现文件上传进度效果，这里使用的是xhr(XMLHttpRequest)的 progress 事件。在此方法中我们可以获取到文件的总大小以及已经发送的大小，进而计算得到上传的百分比。