javascript - 文件大小的进度指示器

Question

我有一个文件“file.json”，我知道它有 1MB。在 javascript 中有什么方法可以在我对文件执行 ajax 请求时根据文件的大小显示进度条？ (即，如果客户端已检索到其中的 500KB，进度条显示 50%，等等？

Answer 1

来自关于 Monitoring Progress 的 MDN 页面:

var oReq = new XMLHttpRequest();

oReq.addEventListener("progress", updateProgress, false);
oReq.addEventListener("load", transferComplete, false);
oReq.addEventListener("error", transferFailed, false);
oReq.addEventListener("abort", transferCanceled, false);

oReq.open();

// ...

// progress on transfers from the server to the client (downloads)
function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total;  // THIS IS WHAT YOU NEED
    // ...
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

function transferComplete(evt) {
  alert("The transfer is complete.");
}

function transferFailed(evt) {
  alert("An error occurred while transferring the file.");
}

function transferCanceled(evt) {
  alert("The transfer has been canceled by the user.");
}