Ver Mensaje Individual
  #3 (permalink)  
Antiguo 22/09/2014, 05:35
evoarte
 
Fecha de Ingreso: julio-2002
Mensajes: 813
Antigüedad: 21 años, 9 meses
Puntos: 2
Respuesta: xmlhttpRequest con addEventListener y múltiples argumentos

buenos días,

He hecho algunos cambios, para crear un div por cada archivo subido, pero cuando subo múltiples archivos, aunque se crean los div correspondientes, es decir, un div por cada archivo, sin embargo solo se actualiza el último.

Es decir, si quiero subir 3 archivos a la vez, se crean estado, avance y textor para los tres (estado1, avance1 y textor1 ... estado2, avance2 y textor2 ... estado3, avance3 y textor3) pero las actualizaciones del progreso se reflejan en el tercer div (estado3, avance3 y textor3)

Código Javascript:
Ver original
  1. var nuar = 0;
  2.        
  3.         function subirArchivo() {
  4.    
  5.             var archivos = document.getElementById("files").files;
  6.    
  7.             for(var i = 0; i< archivos.length; i++)
  8.             {
  9.                 var file = archivos[i];
  10.                 var formdata = new FormData();
  11.                 formdata.append("upload", file);
  12.                
  13.                 nuar += 1;
  14.                 nuel = "estado" + nuar;
  15.                 nuav = "avance" + nuar;
  16.                 nure = "textor" + nuar;
  17.  
  18.                 cael = document.createElement("div");
  19.                 cael.setAttribute("id", nuel);
  20.                 document.getElementById("estado").appendChild(cael);
  21.                
  22.                 caav = document.createElement("div");
  23.                 caav.setAttribute("id", nuav);
  24.                 document.getElementById(nuel).appendChild(caav);
  25.        
  26.                 care = document.createElement("div");
  27.                 care.setAttribute("id", nure);
  28.                 document.getElementById(nuel).appendChild(care);
  29.  
  30.                 var ajax = new XMLHttpRequest();
  31.                     //ajax.upload.addEventListener("progress", progreso, false);
  32.                     ajax.upload.addEventListener("progress", function(event){progreso(event, nuar)}, false);
  33.                     ajax.addEventListener("load", function(event){operacion_completada(event,nuar)}, false);
  34.                     ajax.addEventListener("error", mensaje_error, false);
  35.                     ajax.addEventListener("abort", abortar_subida, false);
  36.                     ajax.open("POST", "upload.php");
  37.                     ajax.send(formdata);
  38.             }
  39.         }
  40.  
  41.  
  42.         function progreso(event,nuar){
  43.    
  44.             nuesav = "avance" + nuar;
  45.             document.getElementById("total").innerHTML = "Subidos "+ event.loaded+" bytes de "+event.total;
  46.             var percent = (event.loaded / event.total) * 100;
  47.             document.getElementById("progressBar").value = Math.round(percent);
  48.             document.getElementById(nuesav).innerHTML = Math.round(percent)+"% subiendo... por favor, espere";
  49.         }
  50.  
  51.         function operacion_completada(event,nuar) {
  52.  
  53.             nuesre = "textor" + nuar;
  54.             document.getElementById(nuesre).innerHTML = event.target.responseText;
  55.             document.getElementById("progressBar").value = 0;
  56.         }
  57.  
  58.         function mensaje_error(event) {
  59.  
  60.             document.getElementById("estado").innerHTML = "Error al subir el archivo";
  61.         }
  62.  
  63.         function abortar_subida(event) {
  64.        
  65.             document.getElementById("estado").innerHTML = "Upload Abort";
  66.         }