如何知道从Javascript下载了多少文件

Question

我有一个大小为8 MB的大数据文件。现在，当我的页面从服务器下载时，我想提供有关下载量的状态更新，例如下载了56％。数据文件本身就是一个.js文件！

我想从我的javascript中做到这一点。我在考虑以下选项。

1）首先测量网络速度 2）然后进行线性插值，因为我知道文件的大小。

但是考虑到连接时间，缓存，渲染等等，测量JS中的netspeed并不是非常可靠。

有没有直接的方法，我可以直接获取部分下载的文件的大小，并计算到目前为止下载了多少。

感谢您的帮助！

Answer 1

您可以使用xmlhttprequest进度事件在兼容HTML5的浏览器中查找文件上传进度。

var oReq = new XMLHttpRequest();

oReq.upload.addEventListener("progress", updateProgress, false);
// progress on transfers from the server to the client (downloads)
function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total;
    // ...
  } else {
    // Unable to compute progress information since the total size is unknown
 }
}

https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress