如何等待所有XHR2送话费完成

问题描述

我已经做了一些code从浏览器到服务器上传多个文件，同时显示还有progressbars。
XHR2送话费是异步的。问题是，我想毕竟XHR2送话费完成后调用某些功能。

I have done some code to upload multiple files from browser to server, while showing progressbars as well.XHR2 send calls are asynchronous. The problem is that I want to call some functions after all the XHR2 send calls are finished.

下面是我的code的一个非常简化的片段：

Here is a very simplified snippet of my code:

<input id="upload" multiple="multiple" />

<script>
var files = document.getElementById("upload").files;
for (var i = 0, length = files.length; i < length; i++) {
   var file = files[i];
   var uploadFunc = function (arg) {
      return function () {
         processXHR(arg);
      };
   }(file);
   uploadFunc();
}

function processXHR(file) {
   var normalizedFileName = getNormalizedName(file.name);
   var url = 'upload_file/';
   var formData = new FormData();
   formData.append("docfile", file);
   var xhr = new XMLHttpRequest();
   var eventSource = xhr.upload;
   eventSource.addEventListener("progress", function (evt) {
      var position = evt.position || evt.loaded;
      var total = evt.totalSize || evt.total;
      console.log('progress_' + normalizedFileName);
      console.log(total + ":" + position);
      $('#progress_' + normalizedFileName).css('width', (position * 100 / total).toString() + '%');
   }, false);
   eventSource.addEventListener("loadstart", function (evt) {
      console.log('loadstart');
   }, false);
   eventSource.addEventListener("abort", function (evt) {
      console.log('abort');
   }, false);
   eventSource.addEventListener("error", function (evt) {
      console.log('error');
   }, false);
   eventSource.addEventListener("timeout", function (evt) {
      console.log('timeout');
   }, false);
   xhr.onreadystatechange = function (evt) {
      if (xhr.readyState == 4) {
         console.log('onreadystatechange: File uploaded.');
      }
   };
    xhr.open('post', url, true);
    xhr.send(formData);
}
</script>

每当的onreadystatechange：文件上传。打印控制台，我知道其中一个文件完成上传。
但我不能写任何code，它会说：所有上传的文件。

Whenever "onreadystatechange: File uploaded." is printed in console, I know that one of the files is done uploading.But I am not able to write any code that will say "All Files uploaded.".

感谢您的帮助。
的我使用jQuery我使用jQuery，以及在某些情况下，一个人的解决方案。的

推荐答案

您需要在您的情况计数器和setInterval方法，试试这个：

You will need a counter and setInterval method in your case, try this:

<input id="upload" multiple="multiple" />

<script>
var files = document.getElementById("upload").files;
var counter = 0;

for (var i = 0, length = files.length; i < length; i++) {
   var file = files[i];
   var uploadFunc = function (arg) {
      return function () {
         processXHR(arg);
      };
   }(file);
   uploadFunc();
}

var interval = setInterval(function() {
    if(counter == files.length) {
        clearInterval(interval);
        console.log("All Files uploaded!");
    }
}, 100);

function processXHR(file) {
   var normalizedFileName = getNormalizedName(file.name);
   var url = 'upload_file/';
   var formData = new FormData();
   formData.append("docfile", file);
   var xhr = new XMLHttpRequest();
   var eventSource = xhr.upload;
   eventSource.addEventListener("progress", function (evt) {
      var position = evt.position || evt.loaded;
      var total = evt.totalSize || evt.total;
      console.log('progress_' + normalizedFileName);
      console.log(total + ":" + position);
      $('#progress_' + normalizedFileName).css('width', (position * 100 / total).toString() + '%');
   }, false);
   eventSource.addEventListener("loadstart", function (evt) {
      console.log('loadstart');
   }, false);
   eventSource.addEventListener("abort", function (evt) {
      console.log('abort');
   }, false);
   eventSource.addEventListener("error", function (evt) {
      console.log('error');
   }, false);
   eventSource.addEventListener("timeout", function (evt) {
      console.log('timeout');
   }, false);
   xhr.onreadystatechange = function (evt) {
      if (xhr.readyState == 4) {
         counter += 1;
      }
   };
    xhr.open('post', url, true);
    xhr.send(formData);
}
</script>

这篇关于如何等待所有XHR2送话费完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！