Ajax系列之文件上传进度展示

---

一、需求

ajax 上传文件时，有时比较耗时，需要在界面上显示下进度信息。

二、解决方案

获取 XMLHttpRequest 中的 xhr 对象，为它的 upload 属性绑定 progress 事件的处理函数。

// 在文件上传的过程中持续触发
xhr.upload.onprogress = function (ev) {
	// ev.loaded 文件已经上传了多少
	// ev.total  上传文件的总大小
	var result = (ev.loaded / ev.total) * 100 + "%";
	// 设置进度条的宽度
	bar.style.width = result;
	// 将百分比显示在进度条中
	bar.innerHTML = result;
};
1
2
3
4
5
6
7
8
9
10

事件对象event中有两个属性 loaded（文件已经上传了多少）和 total（上传文件的总大小），有了这两个属性就可以计算出当前上传的进度，然后将进度显示到页面中即可。

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！