ajax如何传递数据（如何使用 Ajax 实现上传图片时预览及上传进度效果）
一 、引言
继上次实现文件上传功能后 ，产品经理又提出了新的需求：上传图片预览及进度条效果 。本次就来搞定这个功能 ，这次开发基于上次的随笔 ，需要的小伙伴们自取 -- 如何使用Ajax实现简单的文件上传 。
二 、了解原理
要想实现文件预览效果 ，这里使用的是 FileReader 对象 。使用它的 readAsDataURL 方法将图片内容转化为URL格式的Base64字符串 ，然后就可以在其onload事件中用src属性将图片渲染到页面进行预览了 。
要想实现文件上传进度效果 ，这里使用的是xhr(XMLHttpRequest)的 progress 事件 。在此方法中我们可以获取到文件的总大小以及已经发送的大小 ，进而计算得到上传的百分比 。
理论存在 ，开始实践！
三 、编码测试
在上次的Demo基础上对页面进行了一些调整 ，代码如下：
文件对象信息打印如下：
图片预览效果图：
由于本地上传比较快 ，图片太小了看不出效果 ，我特意选了张50M的图片 ，或者大家使用Chrome的网络工具将网速调慢进行测试：
四 、总结
基本功能算是实现了 ，UI还可以优化一下 ，大家也可以自己花点功夫将图片上传功能完善 ，添加大图预览等功能 ，然后封装成一个控件供以后使用 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！