Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/06/2016, 18:04
samuel93
 
Fecha de Ingreso: febrero-2016
Mensajes: 6
Antigüedad: 6 años, 2 meses
Puntos: 0
Multiple upload con ajax

Estoy tratando de generar un upload multiple con ajax.
A partir del siguiente código.

<form action="#" id="frm-upload-multiple">
<input type="file" name="archivos[]" id="archivos" multiple="" />
<input type="submit" value="Subir archivos" />
</form>

$('#frm-upload-multiple').on('submit',subir_archivos);
function subir_archivos(e){
e.preventDefault();
if(contador_archivos){
var i = 0;
for (i ; i < contador_archivos; i++) {
var archivo = document.getElementById(archivos[i].name);
var fd_archivo = new FormData();
fd_archivo.append('archivo',archivos[i]);
cont_envio = 0;
console.log('enviando 1');

upload(fd_archivo,cont_envio);

console.log('se debió enviar 1')
archivo.parentNode.removeChild(archivo);
}
document.getElementById("frm-upload-multiple").reset();
}else{
alert('Seleccione archivos, por favor :)');
}
}
function upload(fd_archivo,cont_envio){
$.ajax({
url : 'http://localhost/debug/upload.php',
data : fd_archivo,
type : 'POST',
async: true,
contentType: false,
processData: false,
beforeSend: function(xhr){

},
success : function(json) {
var datos = $.parseJSON(json);
console.log('Success: '+ (datos.nombre) );
},
error : function(xhr, status) {

},
complete : function(xhr, status) {
cont_envio++;
var datos = $.parseJSON(xhr.responseText);
//console.log(datos);
$("#mensaje_estado").append( "<p>" + datos.nombre + "</p>" );
if(cont_envio == contador_archivos){
console.log("Complete: Se subieron los archivos");
$("#mensaje").html("<h1>Proceso terminado....</h1>");
}

}
});
}

Por el momento el código funciona, pero espera a recorrer los elementos totales con el for hecho al form antes de empezar a enviar y tarda un poco en empezar a enviar.