HTML5 AJAX Subir archivos múltiples

Me encontré con este código de carga js ajax (parece que jquery $.post no funciona con HTML5 por alguna razón),

  /* If you want to upload only a file along with arbitary data that is not in the form, use this */ var fd = new FormData(); fd.append("file", document.getElementById('file').files[0]); /* If you want to simply post the entire form, use this */ //var fd = document.getElementById('form1').getFormData(); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); xhr.open("POST", "Upload.php"); xhr.send(fd); 

Pero tengo dos problemas aquí,

  1. ¿Qué significa esta línea después del objeto FormData ?

fd.append("file", document.getElementById('file').files[0]);

¿Por qué necesito una identificación allí? ¿Puedo hacer algo al usar jquery append() con $('input[type=file]') ?

  1. Este ajax es solo para la carga de un solo archivo, ¿cómo puedo cambiarlo para la carga de múltiples archivos?

¿Qué significa esta línea después del objeto FormData?

 fd.append("file", document.getElementById('file').files[0]); 

document.getElementById('file') obtiene el elemento por su ID. El element.files[0] toma el primer archivo seleccionado del elemento. El fd.append("file", file) agrega a una instancia de FormData con el nombre de campo del file . Posteriormente, el fd se enviará como cuerpo de solicitud XHR multipart/form-data .


¿Por qué necesito una identificación allí? ¿Puedo hacer algo al usar jquery append() con $('input[type=file]') ?

La identificación no es necesaria. Después de todo, es solo un ejemplo para poder obtener el del documento por su ID. Tenga en cuenta que la función append() en este ejemplo es parte de la API FormData y no debe confundirse con la función append() jQuery. También tenga en cuenta que el primer argumento de append() representa el nombre del campo, no el ID. Que sean lo mismo es solo una coincidencia.


Este ajax es solo para la carga de un solo archivo, ¿cómo puedo cambiarlo para la carga de múltiples archivos?

Simplemente agregue múltiples campos a FormData . Suponiendo que tiene un File[] , aquí hay un ejemplo:

 for (var i = 0; i < files.length; i++) { fd.append("file" + i, files[i]); } 

Estará disponible en el extremo del servidor por los nombres de campo file0 , file0 , etc.