С каждым годом сайты становятся всё интерактивнее. Теперь для отправки формы не надо перезагружать страницу, а данные сами проверяются на валидность во время ввода.
Одной из неотъемлемых функций является отправка файлов из формы через AJAX. Разберём как это делается.
Рассмотрим на примере. Существует следующая html форма:
<form action="" method="post">
<input name="NAME" type="text">
<input name="AGE" type="text">
<input name="FILE" type="file"></form>
Для загрузки файлов из формы на сервер через ajax используется объект FormData:
var fdata = new FormData();
fdata.append('FILE', $('input[name=FILE]')[0].files[0]);
fdata.append('NAME', $('input[name=NAME]').val());
fdata.append('AGE', $('input[name=AGE]').val());
$.ajax({url: "/ajax.php",
type: "POST",
data: fdata,
success: function(data){// получение ответа от скрипта-обработчика
},
processData: false,
contentType: false});
Поля формы NAME и AGE вставлены только для демонстрации того, как нужно делать append к данным fdata.
В результате выполнения скрипта на сервер загрузится файл и в переменной $_FILES['FILE'] появится описывающий массив. Точно такой же массив, как и при обычной отправке файла через форму.
Минус такой загрузки файлов через ajax в том, что FormData распознаётся только в новых браузерах.
Как доработать скрипт
Перед отправкой файла ajax'ом, желательно проверить его размер и расширение. Сделать это можно на стороне клиента, через js/jq скрипт: Размер и тип файла в input file
Если файл большой, то он будет долго загружаться. Поэтому пользователь может подумать, что страница повисла. Из-за этого стоит сделать отображение статуса загрузки в процентах. Читайте про это в статье "Процент загрузки файла через AJAX"