HTML5 AJAX нескольких файлов Загрузить

Question

я наткнулся на этой равнине расслоение плотной код Ajax загрузки (кажется, что JQuery $.post не работает с HTML5 по какой-то причине),

/* 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); 

Но у меня есть два вопроса здесь,

1. Что означает эта линия после объекта FormData?

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

Зачем мне нужен идентификатор там? Можно ли что-то использовать jQuery append() с $('input[type=file]')?

1. Этот аякс предназначен только для загрузки одного файла, как я могу его изменить для загрузки нескольких файлов?

Answer 1

Что означает эта линия после объекта FormData?

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

document.getElementById('file') получает <input type="file" id="file"> элемент по его ID. element.files[0] захватывает первый выбранный файл из элемента. Код fd.append("file", file) присоединяет его к экземпляру FormData с именем поля file. fd будет отправлен как multipart/form-data XHR тело запроса.

---

Зачем мне нужен идентификатор там? Можно ли что-то использовать jQuery append() с $('input[type=file]')?

Идентификатор не требуется. В конце концов, это просто пример, чтобы получить <input type="file"> из документа по его идентификатору. Обратите внимание, что функция append() в этом примере является частью the FormData API и ее не следует путать с функцией jQuery append(). Также обратите внимание, что первый аргумент append() представляет имя поля, а не идентификатор. То, что они то же самое, просто совпадение.

---

Этот Аякс предназначен только для одной загрузки файла, как я могу изменить его для нескольких загрузки файлов?

Просто добавьте несколько полей в FormData. Если предположить, что у вас есть File[], вот пример:

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

Это будет доступно в конце сервера по именам полого file0, file1 и т.д.