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

枫s的思念
  • 2.4k

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

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

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

回复
阅读 3.3k
2 个回答

以下摘自阮一峰老师的博客,地址: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。

上传是xhr.upload.onprogress事件,进度信息是e.completed和e.total,记得可能不准确,自行百度吧。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏