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

Question

Я наткнулся на этот простой код загрузки js 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. Этот ajax предназначен только для загрузки одного файла, как я могу изменить его для загрузки нескольких файлов?

Answer 1

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

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

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

---

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

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

---

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

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

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

Он будет доступен на стороне сервера по именам полей file0, file1 и т. Д.