后台系统上传文件回显上传进度条

最新推荐文章于 2023-02-01 09:43:07 发布

生产的驴

最新推荐文章于 2023-02-01 09:43:07 发布

阅读量961

点赞数

文章标签：后端

原文链接：https://my.oschina.net/u/2949632/blog/1542001

版权

本文介绍了如何在Angular4项目中利用XMLHttpRequest Level 2的特性实现后台文件上传进度条。通过监听xhr.readyState === 3的状态获取上传进度，并在服务器端通过flush()方法分批返回数据，实现前端进度的实时更新。虽然xhr.upload.progress可跟踪上传进度，但在本文的场景中，服务器的处理方式使得progress事件并不适用。

摘要由CSDN通过智能技术生成

2019独角兽企业重金招聘Python工程师标准>>>

大家有必要看到文末

xhr传统的AJAX传输对象，在做后台系统的时候经常遇到文件上传的情景，以往的xhr已经能够应对文件表格上传的功能，但如今遇到项目需求，上传的文件比较大数据表较多，为了提高用户体验有必要增加文件上传进度条，让用户知悉当前的操作进度，以免一直停留在空白页究竟有没有上传服务器都不清楚。此文用到的也还是AJAX的技术，XMLHttpRequest Level 2特性（也是老东西）

XHR2的事件例表：

attribute type Explanation

onloadstart loadstart When the request starts.

onprogress progress While loading and sending data.

onabort abort When the request has been aborted, either by invoking the abort() method or navigating away from the page.

onerror error When the request has failed.

onload load When the request has successfully completed.

ontimeout timeout When the author specified timeout has passed before the request could complete.

onloadend loadend When the request has completed, regardless of whether or not it was successful.

attribute	type	Explanation
`onloadstart`	`loadstart`	When the request starts.
`onprogress`	`progress`	While loading and sending data.
`onabort`	`abort`	When the request has been aborted, either by invoking the `abort()` method or navigating away from the page.
`onerror`	`error`	When the request has failed.
`onload`	`load`	When the request has successfully completed.
`ontimeout`	`timeout`	When the author specified timeout has passed before the request could complete.
`onloadend`	`loadend`	When the request has completed, regardless of whether or not it was successful.