javascript - XMLHttpRequest Level2中如何监测文件上传服务器的进度？

问题描述

问 题

在XMLHttpRequest2级中添加了progress事件可以监测文件下载的进度，那文件上传进度如何检测？

xhr.onprogress=function (e) {
    console.log(e.positon);
    console.log(e.totalSize);
}

以上代码运行输出的是undefined，
在javascript高级程序设计第三版中写到：‘progress事件会在浏览器接收到新数据时候触发，该事件会接收到一个event对象，其中包含三个额外属性，lengthComputable、position、totalSize’
这是为什么？如何实现文件上传进度条？

解决方案

以下摘自阮一峰老师的博客，地址：http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html
新版本的XMLHttpRequest对象，传送数据的时候，有一个progress事件，用来返回进度信息。
它分成上传和下载两种情况。下载的progress事件属于XMLHttpRequest对象，上传的progress事件属于XMLHttpRequest.upload对象。
然后，在回调函数里面，使用这个事件的一些属性。

function updateProgress(event) {
　　　　if (event.lengthComputable) {
　　　　　　var percentComplete = event.loaded / event.total;
　　　　}
　　}

上面的代码中，event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0。

这篇关于javascript - XMLHttpRequest Level2中如何监测文件上传服务器的进度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！