enviar ajax cada por cada archivo en un solo input (html5 input multuple)

[sonickseven]

Hola chicos hoy voy a hacer una pregunta que es nueva para la mayoria y es sobre la forma de enviar archivos con javascript con el objeto FormData.

Bueno mi pregunta es la siguiente:

yo hice un foreach en javascript que lo que hace es recorrer por cada uno de los archivos que el usuario a insertado en un input file multiple.
por cada uno de los archivos envie un array los inserto en un FormData y los envio. Pues el problema es que no se como limpiar el formdata ya que cada vez que se recorre el archivo esta variable guarda el siguiente pero tambien el aterior y cada vez va creciendo y asi no me sirve.

codigo:

Código Javascript:

if(window.FormData){ //valida si el explorador puede trabajar con el Formdata
        formdata = new FormData();
        //document.getElementById('btnSubmit').style.display = 'none';
    }
 
if(button.addEventListener){
        button.addEventListener('click', function(evt){ // escucha cuando le da click a un boton
            var i = 0, len = input.files.length, img, reader, file; // las variables
            
            document.getElementById('response').innerHTML = 'Subiendo...';
            
            //Si hay varias imágenes, las obtenemos una a una
            for( ; i < len; i++){ //  hago un foreach por cada archivo que tenga el input dentro acordemos que es HTML5
                file = input.files[i];
                //console.log(file);
                //Una pequeña validación para subir imágenes
                if(!!file.type.match(/image.*/)){
                    //Si el navegador soporta el objeto FileReader
                    /*if(window.FileReader){
                        reader = new FileReader();
                        //Llamamos a este evento cuando la lectura del archivo es completa
                        //Después agregamos la imagen en una lista
                        reader.onloadend = function(e){
                            mostrarImagenSubida(e.target.result); // funcion que muestra la imagen antes de subirla al servidor
                        };
//                        //Comienza a leer el archivo
//                        //Cuando termina el evento onloadend es llamado
                        reader.readAsDataURL(file);
                    }*/
                    
//                    Si existe una instancia de FormData
                    if(formdata)
                        //Usamos el método append, cuyos parámetros son:
                            //name : El nombre del campo
                            //value: El valor del campo (puede ser de tipo Blob, File e incluso string)
                        formdata.append('images[]', file); // aqui es donde le asigno al formdata los archivos
                        //console.log(file);
                        //formdata='cod='+i+'&'+formdata;
                        var hola=envio(formdata);
                        if(hola){
                            console.log('ok'); // valido si envio limpio el formdata
                        }else{
                            console.log('error'); // no envio no limpia
                        }
                }
            }           
        });
    }
}());
 
function envio(form){ // funcion que envia datos pero pues aqui no creo que importe
    var reto;
     if(form){
        $.ajax({
           url : 'upload.php',
           type : 'POST',
           data : form,
           processData : false, 
           contentType : false, 
           success : function(res){
               document.getElementById('response').innerHTML = res;
               reto=true;
           }
        });
    }
    reto=false;
}
 

tengo un archivo php que lee los archivos y puse un echo que me muestra los nombre de los archivos y me sale asi

/*****************

ciclo 1:

jaja.jpg

ciclo2:

jaja.jpg
mañana.png

ciclo 3:

jaja.jpg
mañana.png
forever.jpg

ciclo 4:

jaja-jpg
mañana.png
forever.jpg
hello.jpg


si se dan de cuenta se envia si la cntidad de archivco que hay dentro del input pero lo que se envia cada vez se incrementa y pues asi no me sirve por que sino cada vez se pone mas pesado el envio y se malgasta recursos entonces nooo

la cosa es como hago para limpiar el formdata y como hago la funcion que valida si se envio el dato en este caso el archivo por que no se todabia como hacer?

gracias de antemano por la atencion chicos :D

/*****************

[3nr1c]

Saludos,

Lo que tendrías que hacer es crear un formdata nuevo cada vez, es decir

Código Javascript:

if(!!file.type.match(/image.*/)){
 
                       if(window.FormData){ //valida si el explorador puede trabajar con el Formdata
                              formdata = new FormData();
                       }
 
                        //Usamos el método append, cuyos parámetros son:
                            //name : El nombre del campo
                            //value: El valor del campo (puede ser de tipo Blob, File e incluso string)
                        formdata.append('images[]', file); // aqui es donde le asigno al formdata los archivos
                        //console.log(file);
                        //formdata='cod='+i+'&'+formdata;
                        var hola=envio(formdata);
                        if(hola){
                            console.log('ok'); // valido si envio limpio el formdata
                        }else{
                            console.log('error'); // no envio no limpia
                        }
                }
 

Aunque para enviar archivos yo no te recomendaría Formdata sino más bien XMLHTTPRequest2: http://www.enricflorit.com/como-subi...s-usando-ajax/

Un saludo!

[sonickseven]

ya lo solucione y es facil :D amm por cierto si es necesario el formadata ya que es el que envia archivos de forma asincronoma....

Ahora el lio es como saber que envio seria algo asi con el objeto XMLHTTPReques2 en la parte de envio se completa para enviar uno por uno..como ves en la función envio lo trato de hacer en la parte del success:
pero no me funciona bn por que lo que hace es enviar toda la cantidad de POST que hay entonces cree la siguiente funcion que es similar a la de envio solo que es por javascript con el metodo XMLHTTPReques aqui el codigo:

Código Javascript:

function envio3(datos){
    var oReq=new XMLHttpRequest();
    oReq.upload.addEventListener('progress', prigress, false);
    oReq.open('POST', 'upload.php', true);
    oReq.onreadystatechange = function(){ if(this.readyState===4){
        return true;
    }else{
        return false;
    }
    }   
    oReq.send(datos);
}
 

lo hize de esta forma pero no me ha funcionado ya que cuando le asigno esta funcion a un dato me dice que undefined

Código Javascript:

var hola=envio3(formdata);
                        console.log(hola);
 

tonces modifique la funcion de nuevo haber que tal me hiba

Código Javascript:

function envio3(datos){
    var oReq=new XMLHttpRequest(), retor;
    oReq.upload.addEventListener('progress', prigress, false);
    oReq.open('POST', 'upload.php', true);
    oReq.onreadystatechange = function(){ if(this.readyState===4){
        retor=true;
    }else{
        retor=false;
    }
    }
    oReq.send(datos);
     return retor;
}
 

y ensaye pero lo mismo dice que esta indefinida tonces no se que hacer?

Lo que quiero es que por ejemplo envio un dato y si ese dato ya se termino de enviar ahora envie el otro y asi sucesivamente por que del modo que lo tengo no lo hace y es lo miso que veo en el block que me enviaste donde mostraba como subir archivo multiples :D

voya seguir intentando