Как загрузить файл на форму если форма отправляется через Ajax?

Question

[vrazbros]

Делаю попап в котором данные формы сириализуются и через ajax отправляются на сервер. С текстовыми полями все понятно, но как загрузить на форму файл ? как отследить что файл загрузился и только полсле этого отправить данные на сервер.....те как загрузить файл на форму если форма отправляется через Ajax ?

Comments

[Vladimir]

В форме сделать input с type = “file”, загруженный файл, отправленный POST, будет в массива $_FILE

[vrazbros]

Vladimir, вы не поняли вопрос

[Алексей П]

Какой у вас Фреймворк?

[Ди Ма]

Все Vladimir правильно понял.

// готовим данные
var formData = new FormData();
var input = $('#myform')[0].files;

// добавляем файлы для отправки
jQuery.each(input, function (i, file) {
	formData.append('file-' + i, file);
});
// добавляем путь (куда загрузить)
formData.append('uploadFile', 'myPath');

$.ajax({
	type: 'POST',
	url: 'myUrl',
	data: formData,
	cache: false,
	processData: false,
	contentType: false,

}).done(function (r) {
	console.log(r);
});

// когда приходит пост запрос
if (isset($_POST['uploadFile'])) {
	if (!empty($_FILES)) {
		foreach ($_FILES as $file) {
			// делаем что надо с полученными файлами
			// $_POST['uploadFile'] - это myPath, который мы передали
		}
	}
}

[vrazbros]

Алексей Попрядухин, jQuery и Laravel

[vrazbros]

Ди Ма, я только не понимаю для файла надо делать отдельный ajax запрос ? тк на форме еще полно всего и сейчас остальные поля отправляются так

var formData = jQuery(form).serializeArray();
            console.log('Send request');
            $.ajax('/save-data-form', {
                type: 'post',
                data: formData,
                success: $.proxy(self.onRequestStatus, self),
                error: $.proxy(self.onServerError, self),
            });

?

[Ди Ма]

vrazbros, formData.append('uploadFile', 'myPath'); добавляет новые поля в объект данных. Вместо serialize добавьте данные например в цикле обходя поля формы. Читайте FormData, там наверняка что-то есть на эту тему.

Answer 1

[Сергей]

Отправлять через FormData

Answer 2

[Алексей П]

Возьмите какой-нибудь плагин для jQuery https://www.sitepoint.com/10-jquery-file-uploads/ . Большинство из них предоставляют прогресс бар в котором видна загрузка файла на форму, возможность удалить с формы до отправки на сервер.