Загрузка нескольких файлов с помощью formData()

var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "uph.php");
xhr.send(fd);

uph.php:

var_dump($_FILES['fileToUpload']);

Это работает, но очевидно только для files[0]. Как заставить это работать для выбранного файла?

Я попытался удалить [0], но это не сработало.

Ответы

Ответ 1

Вам нужно получить длину файла для добавления в JS, а затем отправить его по запросу AJAX, как показано ниже

//JavaScript 
var ins = document.getElementById('fileToUpload').files.length;
for (var x = 0; x < ins; x++) {
    fd.append("fileToUpload[]", document.getElementById('fileToUpload').files[x]);
}

//PHP
$count = count($_FILES['fileToUpload']['name']);
for ($i = 0; $i < $count; $i++) {
    echo 'Name: '.$_FILES['fileToUpload']['name'][$i].'<br/>';
}

Ответ 2

Как работать с javascript:

var data = new FormData();

$.each($("input[type='file']")[0].files, function(i, file) {
    data.append('file', file);
});

$.ajax({
    type: 'POST',
    url: '/your/url',
    cache: false,
    contentType: false,
    processData: false,
    data : data,
    success: function(result){
        console.log(result);
    },
    error: function(err){
        console.log(err);
    }
})

Если вы вызываете data.append( "файл", файл) несколько раз, ваш запрос будет содержать массив ваших файлов.

Использование с помощью node.js и мультиплеера промежуточного программного обеспечения multer получает следующие данные:

router.post('/trip/save', upload.array('file', 10), function(req, res){
    // Your array of files is in req.files
}

Ответ 3

Вам просто нужно использовать fileToUpload[] вместо fileToUpload:

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

И он вернет массив с несколькими именами, размерами и т.д.