javascript - open - Cómo esperar a que terminen todas las llamadas de envío XHR2

xmlhttp status

Question

He hecho algunos códigos para subir varios archivos desde el navegador al servidor, al tiempo que se muestran las barras de progreso. Las llamadas de envío XHR2 son asíncronas. El problema es que quiero llamar a algunas funciones después de que todas las llamadas de envío XHR2 hayan finalizado.

Aquí hay un fragmento muy simplificado de mi código:

<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>

Siempre que "onreadystatechange: archivo subido". está impreso en la consola, sé que uno de los archivos se ha terminado de cargar. Pero no puedo escribir ningún código que diga "Todos los archivos cargados".

Gracias por cualquier ayuda. También estoy usando jquery en caso de que alguien tenga una solución usando jquery.

Answer 1

¿Sabes cuántas llamadas estás haciendo? Si es así, al menos la devolución de llamada ajax, verifica el recuento. Algo como

if (ajaxCallCount === ajaxCallsLength) {
 // Do stuff involving post all ajax calls
} else {
 ajaxCallCount++;
}

Answer 2

Necesitará un contador y método setInterval en su caso, intente esto:

<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>