Как отправить файлы с помощью FormData?

Question

[Николай]

Здравствуйте! Имеем некоторую форму, в которую добавляем картинки:

ejs('#add_images').change(function (event) {
        let files = this.files;

        for (let i = 0; i < files.length; i++) {
            // Всяческие проверки

            preview(file);
        }
    });

В функции preview() мы производим некоторые манипуляции (которые не имеют значения) и добавляем файл в определенный массив:

function preview (file) {
        reader.addEventListener('load', function (event) {
            // ...
            queue[file.name] = file;
        });
    }

Ну и просто отправляем форму:

form.on('submit', function(event) { event.preventDefault();
        let formData = new FormData(),
            id;

        for (id in queue) {
            formData.append('images', queue[id]);
            // formData.append('images[' + id + ']', queue[id]); - не работает!
            // formData.append('images[]', queue[id]); - не работает!
        }

        sendFormData(
            '/test',
            formData
        ).then(function (response) {
            console.log(response); // всегда возвращает array(0) {}
        });

        return false;
    });

sendFormData - обёртка для Promise:

function sendFormData(url, data) {
    return new Promise(function(resolve, reject) {
        let request = new XMLHttpRequest();

        request.open('post', url);
        request.onload = function() {
            if (request.status == 200) {
                resolve(request.response);
            } else {
                reject(Error(request.statusText));
            }
        };

        request.onerror = function() {
            reject(Error("Network Error"));
        };

        request.send(data);
    });
};

На стороне PHP возвращаю просто var_dump:
var_dump($_POST);

И всегда возвращается
array(0) {}
Хотя изображения присутствуют в FormData.

Comments

[Максим Тимофеев]

На стороне PHP возвращаю просто var_dump:
var_dump($_POST);

Зачем?

А в чем конкретно проблема? Вопрос в чем? Есть ошибки? Что не так?

[Николай]

Максим Тимофеев, var_dump необходим что бы понять что приходит.

А в чем конкретно проблема?

В том, что всегда возвращается array(0) {}

Вопрос в чем?

Как мне отправить правильно файлы с помощью FormData на сервер.

[Максим Тимофеев]

Николай,

var_dump необходим что бы понять что приходит.

Ну кроме post еще есть $_FILES

Как мне отправить правильно FormData на сервер.

https://learn.javascript.ru/xhr-forms

[Николай]

Максим Тимофеев,

Ну кроме post еще есть $_FILES

Да уж, пора идти в отпуск.
Спасибо!

[Максим Тимофеев]

Николай, бывает)))

Answer 1

[Антон Шаманов]

нужно указать параметры ajax запроса

processData: false,
contentType: false,

Comments

[Антон Шаманов]

пример рабочего кода

$.ajax({
    url:  uploadUrl, 
    data: formData, 
    processData: false,
    contentType: false,
    cache: false,
    type: 'post',
    dataType: 'json',
    success: function (response) {
      // ...
    }
});