Как отправлять файлы через AJAX?

Question

[tester]

Всем привет!

Написал ajax для обработки формы с возможностью прикрепления файла

Обычные текстовые поля успешно обрабатывает и они приходят на почту, а вот с файлом никак (не видит)

// E-mail Ajax Send
$("form").submit(function (event) {
    var form_data = new FormData();

    // Добавление полей
    var all_input = $(this).serializeArray();
    jQuery.each(all_input, function(i, field){
     form_data.append(field.name, field.value);
    });

    // Прикрепляем фото
    var file_data = $('input[type="file"]').prop('files')[0];
    form_data.append('file', file_data);

    $.ajax({
        type: "POST",
        url: "mail.php",
        dataType: 'text',
        cache: false,
        contentType: false,
        processData: false,

        data: th.serialize(),
        data: form_data,
    }).done(function () {});
    return false;
});

php скрипт:

Answer 1

[zkrvndm]

Все куда проще. Попробуйте так:

$('form').submit(async function(event) {
	
	event.preventDefault(); // Предотвращаем отправку формы
	var form = new FormData($('form')[0]); // Получаем форму
	
	// Отправляем форму AJAX-ом:
	
    var response = await $.ajax({
        type: 'POST',
        url: 'mail.php',
        cache: false,
        data: form,
    });
	
	alert(response); // Выводим ответ
	
});

Comments

[tester]

Спасибо!

Но еще нужно добавить к коду

processData: false,
contentType: false,

[zkrvndm]

tester, при отправки FormData заголовки выставляются обычно автоматом. Поэтому должно работать и без указания contentType и processData.

[tester]

Надим Закиров, вот эта ошибка выходила без contentType и processData
Uncaught TypeError: Illegal invocation

[zkrvndm]

tester, ясно. Видимо все таки не выставляет. Рад что вы сами разобрались.