Ver Mensaje Individual
  #10 (permalink)  
Antiguo 25/09/2014, 05:53
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

Hola Isabel,

Casi ...
Si subo varios archivos a la vez esta solución funciona,
pero si vuelvo a subir, sin recargar la página, ya no funciona.

así está el código:
Código Javascript:
Ver original
  1. var nuar = 0;
  2.        
  3.         function subirArchivo() {
  4.    
  5.             var archivos = document.getElementById("files").files;
  6.  
  7.             for(i=0; i<archivos.length; i++)
  8.             {
  9.                 (function(i){
  10.  
  11.                     var file = archivos[i];
  12.                     var formdata = new FormData();
  13.                     formdata.append("upload", file);
  14.                
  15.                     nuel = "estado" + i;
  16.                     nuav = "avance" + i;
  17.                     nure = "textor" + i;
  18.                     nuno = "nofile" + i;
  19.                     nuda = "capaba" + i;
  20.                     nuba = "nbarra" + i;
  21.                     noar = document.getElementById("files").files[i].name;             
  22.  
  23.                     cael = document.createElement("div");
  24.                     cael.setAttribute("id", nuel);
  25.                     document.getElementById("estado").appendChild(cael);
  26.                    
  27.                     caar = document.createElement("div");
  28.                     caar.setAttribute("id", nuno);
  29.                     document.getElementById(nuel).appendChild(caar);
  30.                     document.getElementById(nuno).innerHTML = i + " " + noar;
  31.                
  32.                     caav = document.createElement("div");
  33.                     caav.setAttribute("id", nuav);
  34.                     document.getElementById(nuel).appendChild(caav);
  35.                
  36.                     cada = document.createElement("div");
  37.                     cada.setAttribute("id", nuda);
  38.                     cada.setAttribute('class','progressbar');
  39.                     document.getElementById(nuel).appendChild(cada);
  40.                     caba = document.createElement("div");
  41.                     caba.setAttribute("id", nuba);
  42.                     caba.setAttribute('class','progress');
  43.                     document.getElementById(nuda).appendChild(caba);
  44.        
  45.                     care = document.createElement("div");
  46.                     care.setAttribute("id", nure);
  47.                     document.getElementById(nuel).appendChild(care);
  48.  
  49.                     var ajax = new XMLHttpRequest();
  50.                         //ajax.upload.addEventListener("progress", progreso, false);
  51.                         ajax.upload.addEventListener("progress", function(event){progreso(event, i)}, false);
  52.                         ajax.addEventListener("load", function(event){operacion_completada(event,i)}, false);
  53.                         ajax.addEventListener("error", mensaje_error, false);
  54.                         ajax.addEventListener("abort", abortar_subida, false);
  55.                         ajax.open("POST", "upload.php");
  56.                
  57.                         ajax.send(formdata);
  58.  
  59.                 })(i)
  60.             }
  61.         }
  62.  
  63.  
  64.         function progreso(event,nuar){
  65.            
  66.  
  67.             nutota = nuar;
  68.             nuesav = "avance" + nutota;
  69.             nubara = "nbarra" + nutota;
  70.            
  71.             document.getElementById("total").innerHTML = "Subidos "+ event.loaded+" bytes de "+event.total;
  72.             var percent = (event.loaded / event.total) * 100;
  73.             document.getElementById("progressBar").value = Math.round(percent);
  74.             document.getElementById(nubara).style.width = Math.round(percent)+'%';
  75.             document.getElementById(nuesav).innerHTML = Math.round(percent)+"% subiendo... por favor, espere";
  76.         }
  77.  
  78.         function operacion_completada(event,nuar) {
  79.  
  80.             nuesre = "textor" + nuar;
  81.             document.getElementById(nuesre).innerHTML = event.target.responseText;
  82.             document.getElementById("progressBar").value = 0;
  83.         }
  84.  
  85.         function mensaje_error(event) {
  86.  
  87.             document.getElementById("estado").innerHTML = "Error al subir el archivo";
  88.         }
  89.  
  90.         function abortar_subida(event) {
  91.        
  92.             document.getElementById("estado").innerHTML = "Upload Abort";
  93.         }


salu2.