xmlhttpRequest con addEventListener y múltiples argumentos

[evoarte]

buenos días,

Pretendo hacer una llamada ajax por cada archivo subido, y disponer de un div donde mostrar el proceso de subida archivo a archivo, me encuentro con el problema de poder pasar varios argumentos para manejar el evento, no tengo claro como pasar varios argumentos a la función progreso:

Código Javascript:

function subirArchivo() {
    
            var archivos = document.getElementById("files").files;
   
            for(var i = 0; i< archivos.length; i++)
            {
                var file = archivos[i];
                var formdata = new FormData();
                formdata.append("upload", file);
        
                var ajax = new XMLHttpRequest();
                    ajax.upload.addEventListener("progress", progreso, false);
                    ajax.addEventListener("load", operacion_completada, false);
                    ajax.addEventListener("error", mensaje_error, false);
                    ajax.addEventListener("abort", abortar_subida, false);
                    ajax.open("POST", "upload.php");
                    ajax.send(formdata);
            } 
        }
 
 
        function progreso(event){
    
            document.getElementById("total").innerHTML = "Subidos "+ event.loaded+" bytes de "+event.total;
            var percent = (event.loaded / event.total) * 100;
            document.getElementById("progressBar").value = Math.round(percent);
            document.getElementById("estado").innerHTML = Math.round(percent)+"% subiendo... por favor, espere";
        }
 
        function operacion_completada(event) {
 
            document.getElementById("estado").innerHTML = event.target.responseText;
            document.getElementById("progressBar").value = 0;
        }
 
        function mensaje_error(event) {
 
            document.getElementById("estado").innerHTML = "Error al subir el archivo";
        }
 
        function abortar_subida(event) {
        
            document.getElementById("estado").innerHTML = "Upload Abort";
        }
 

[IsaBelM]

has de usar una función anónima. como verás. en este caso le paso el objeto event

ajax.upload.addEventListener("progress", function(event){progreso(event, param1, param2)}, false);

[evoarte]

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:

var nuar = 0;
        
        function subirArchivo() {
    
            var archivos = document.getElementById("files").files;
   
            for(var i = 0; i< archivos.length; i++)
            {
                var file = archivos[i];
                var formdata = new FormData();
                formdata.append("upload", file);
                
                nuar += 1;
                nuel = "estado" + nuar;
                nuav = "avance" + nuar;
                nure = "textor" + nuar;
 
                cael = document.createElement("div");
                cael.setAttribute("id", nuel);
                document.getElementById("estado").appendChild(cael);
                
                caav = document.createElement("div");
                caav.setAttribute("id", nuav);
                document.getElementById(nuel).appendChild(caav);
        
                care = document.createElement("div");
                care.setAttribute("id", nure);
                document.getElementById(nuel).appendChild(care);
 
                var ajax = new XMLHttpRequest();
                    //ajax.upload.addEventListener("progress", progreso, false);
                    ajax.upload.addEventListener("progress", function(event){progreso(event, nuar)}, false);
                    ajax.addEventListener("load", function(event){operacion_completada(event,nuar)}, false);
                    ajax.addEventListener("error", mensaje_error, false);
                    ajax.addEventListener("abort", abortar_subida, false);
                    ajax.open("POST", "upload.php");
                    ajax.send(formdata);
            } 
        }
 
 
        function progreso(event,nuar){
    
            nuesav = "avance" + nuar;
            document.getElementById("total").innerHTML = "Subidos "+ event.loaded+" bytes de "+event.total;
            var percent = (event.loaded / event.total) * 100;
            document.getElementById("progressBar").value = Math.round(percent);
            document.getElementById(nuesav).innerHTML = Math.round(percent)+"% subiendo... por favor, espere";
        }
 
        function operacion_completada(event,nuar) {
 
            nuesre = "textor" + nuar;
            document.getElementById(nuesre).innerHTML = event.target.responseText;
            document.getElementById("progressBar").value = 0;
        }
 
        function mensaje_error(event) {
 
            document.getElementById("estado").innerHTML = "Error al subir el archivo";
        }
 
        function abortar_subida(event) {
        
            document.getElementById("estado").innerHTML = "Upload Abort";
        }
 

[IsaBelM]

prueba con función anónima para pasarle a la función anónima la variable i

for(var i = 0; i< archivos.length; i++) {
(function(i) {
........
}(i);
}

[evoarte]

Buenas tardes,

Esta solución que propones lo la entiendo bien, no veo como sería el código completo.

sin embargo, tal y como está construido no puedo crear los div siguiendo el valor de i, por que si se suben 3 archivos, y luego se eligen 3 más para subir, los dív para los 3 últimos archivos no serían 4, 5 y 6.

[IsaBelM]

Iniciado por evoarte

Esta solución que propones lo la entiendo bien, no veo como sería el código completo.

no sé qué es lo que no entiendes

Iniciado por evoarte

sin embargo, tal y como está construido no puedo crear los div siguiendo el valor de i, por que si se suben 3 archivos, y luego se eligen 3 más para subir, los dív para los 3 últimos archivos no serían 4, 5 y 6.

no, tal y como planteas hacerlo, es como no puedes lograr tu propósito. cuando se subieran otros 3 archivos, el largo de var archivos sería 6 y var nuar valdría 9 (3 de la primera subida y 6 de la segunda). una solución es esta

Código:

var nuar = 0;
var cuantos = 0;

           function subirArchivo() {
    
                 var archivos = document.getElementById("files").files;
	         var i;

                 for(i = cuantos; i< archivos.length; i++)
	         {

                 }

                 cuantos = i;

           }

[evoarte]

Hola Isabel,

Los contadores los tengo bien, creo que el problema es otro,

En el caso de que seleccione 2 archivos:
lo que he observado es que hasta que no termina el bucle for no se dispara el evento, por que cuando sube el primer archivo no se muestra ni el proceso de subida ni el resultado de esa primera llamada ajax,
si embargo, al enviar el segundo si.

Cuando voy seleccionando 1 a 1 no hay problema.

un saludo,
josé carlos.

[IsaBelM]

no veo el objeto de preguntar si no tomas en cuenta nada de lo que se te dice. y peor aún, no veo sentido a intentar ayudate. de tal modo que esta será mi última intervención en este tema

haré algo que tu no has hecho, probar para ver si funciona

var nuar = 0;

function subirArchivo() {
var archivos = 3;
for(var i = 0; i< archivos; i++){
nuar += 1;
document.querySelectorAll('.p')[i].addEventListener('click', function(event){progreso(event, nuar)}, false);
}
}

function progreso(event,nuar){
console.log(nuar); // valores 3,3,3
}


window.addEventListener('load', subirArchivo, false);

function subirArchivo() {
var archivos = 3;
for(var i = 0; i< archivos; i++){
(function(i) {
document.querySelectorAll('.p')[i].addEventListener('click', function(event){progreso(event, i)}, false);
})(i)
}
}

function progreso(event,nuar){
console.log(nuar); // valores 0,1,2
}


window.addEventListener('load', subirArchivo, false);

te lo doy mascado

<span class="p" style="margin-right: 30px; width:100px; height:100px">1</span>
<span class="p" style="margin-right: 30px; width:100px; height:100px">2</span>
<span class="p" style="margin-right: 30px; width:100px; height:100px">3</span>

[evoarte]

hola Isabel,

la primera solución no la entendía, por eso no la había utilizado, he leído sobre funciones anónimas y empiezo a ver algo de luz, mañana realizo las pruebas y te comento.

la segunda, si la he probado, pero no he podido hacerla funcionar.

Mañana veo y te digo.

salu2.

[evoarte]

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:

var nuar = 0;
        
        function subirArchivo() {
    
            var archivos = document.getElementById("files").files;
 
            for(i=0; i<archivos.length; i++)
            {
                (function(i){
 
                    var file = archivos[i];
                    var formdata = new FormData();
                    formdata.append("upload", file);
                
                    nuel = "estado" + i;
                    nuav = "avance" + i;
                    nure = "textor" + i;
                    nuno = "nofile" + i;
                    nuda = "capaba" + i;
                    nuba = "nbarra" + i;
                    noar = document.getElementById("files").files[i].name;              
 
                    cael = document.createElement("div");
                    cael.setAttribute("id", nuel);
                    document.getElementById("estado").appendChild(cael);
                    
                    caar = document.createElement("div");
                    caar.setAttribute("id", nuno);
                    document.getElementById(nuel).appendChild(caar);
                    document.getElementById(nuno).innerHTML = i + " " + noar;
                
                    caav = document.createElement("div");
                    caav.setAttribute("id", nuav);
                    document.getElementById(nuel).appendChild(caav);
                
                    cada = document.createElement("div");
                    cada.setAttribute("id", nuda);
                    cada.setAttribute('class','progressbar');
                    document.getElementById(nuel).appendChild(cada);
                    caba = document.createElement("div");
                    caba.setAttribute("id", nuba);
                    caba.setAttribute('class','progress');
                    document.getElementById(nuda).appendChild(caba);
        
                    care = document.createElement("div");
                    care.setAttribute("id", nure);
                    document.getElementById(nuel).appendChild(care);
 
                    var ajax = new XMLHttpRequest();
                        //ajax.upload.addEventListener("progress", progreso, false);
                        ajax.upload.addEventListener("progress", function(event){progreso(event, i)}, false);
                        ajax.addEventListener("load", function(event){operacion_completada(event,i)}, false);
                        ajax.addEventListener("error", mensaje_error, false);
                        ajax.addEventListener("abort", abortar_subida, false);
                        ajax.open("POST", "upload.php");
                
                        ajax.send(formdata);
 
                })(i)
            }
        }
 
 
        function progreso(event,nuar){
            
 
            nutota = nuar;
            nuesav = "avance" + nutota;
            nubara = "nbarra" + nutota;
            
            document.getElementById("total").innerHTML = "Subidos "+ event.loaded+" bytes de "+event.total;
            var percent = (event.loaded / event.total) * 100;
            document.getElementById("progressBar").value = Math.round(percent);
            document.getElementById(nubara).style.width = Math.round(percent)+'%';
            document.getElementById(nuesav).innerHTML = Math.round(percent)+"% subiendo... por favor, espere";
        }
 
        function operacion_completada(event,nuar) {
 
            nuesre = "textor" + nuar;
            document.getElementById(nuesre).innerHTML = event.target.responseText;
            document.getElementById("progressBar").value = 0;
        }
 
        function mensaje_error(event) {
 
            document.getElementById("estado").innerHTML = "Error al subir el archivo";
        }
 
        function abortar_subida(event) {
        
            document.getElementById("estado").innerHTML = "Upload Abort";
        }
 

salu2.