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.