Отправка формы с файлом по jquery.ajax

В старых браузерах способов загружать файлы без перезагрузки самой страницы, было не так уж и много (скрытый iframe, Flash). Если для вас не важна поддержка старых браузеров, то можно пользоваться прогрессом:)

Данный пост будет об отправке формы с файлом (файлами) без перезагрузки страницы, с помощью Jquery.Ajax 

Еще до недавнего времени, способов загружать файлы без перезагрузки самой страницы, было не так уж и много (скрытый iframe, Flash). Они и сейчас используются по причине того, что еще остаются пользователи со старыми версиями браузеров, которых не коснулся прогресс.

Существует несколько способов отправки данных по ajax-технологии. Наиболее удобной можно назвать использование объекта FormData. Данный объект позволяет производить отправку данных даже в том случае, если на странице нет формы.

Считаю правильным для проектов создавать общие конфигурационные файлы JS, в которые выносить все настройки, используемые в скриптах. 

Пропишем в конфигурационный JS-файл общие правила для выполнения ajax-запросов:

// Описываем общие установки для всех ajax-запросов
$.ajaxSetup({
  url: 'path/to/handler.php', // путь к php-обработчику
  type: 'POST', // метод передачи данных
  dataType: 'json', // тип ожидаемых данных в ответе
  beforeSend: function(){ // Функция вызывается перед отправкой запроса
    console.debug('Запрос отправлен. Ждите ответа.');
	// тут можно, к примеру, начинать показ прелоадера, в общем, на ваше усмотрение
  },
  error: function(req, text, error){ // отслеживание ошибок во время выполнения ajax-запроса
    console.error('Упс! Ошибочка: ' + text + ' | ' + error);
  },
  complete: function(){ // функция вызывается по окончании запроса
    console.debug('Запрос полностью завершен!');
	// тут завершаем показ прелоадера, если вы его показывали
  }
});

Теперь перейдем к процессу передачи файлов, вместе с другими полями формы, по ajax-технологии:

<form action="handler.php" method="post" id="my_form" enctype="multipart/form-data">

   <label for="fio">Ф.И.О:</label>

     <input type="text" name="fio" id="fio"><br>

   <label for="avatar">Аватар:</label>

     <input type="file" name="avatar" id="avatar"><br>

   <input type="submit" id="submit" value="Отправить">

 </form>

Функция отправки данных формы, в таком случае, принимает вид:

$(function(){
  $('#my_form').on('submit', function(e){
    e.preventDefault();
    var $that = $(this),
    formData = new FormData($that.get(0)); // создаем новый экземпляр объекта и передаем ему нашу форму (*)
    $.ajax({
      contentType: false, // важно - убираем форматирование данных по умолчанию
      processData: false, // важно - убираем преобразование строк по умолчанию
      data: formData,
      success: function(json){
        if(json){
          // тут что-то делаем с полученным результатом
        }
      }
    });
  });
});

И на сервере файле со скриптом-обработчиком прописываем механизм сохранения данных формы:

if(isset($_POST['fio'],$_FILES['avatar'])){
  // тут производим сохранение полученных из формы данных. С этой задачей, думаю, сможете справиться самостоятельно,
  // приведу в качестве примера просто возврат принятых сервером данных:

  $req = false; // изначально переменная для "ответа" - false
  // Приведём полученную информацию в удобочитаемый вид
  ob_start();
  echo '<pre>';
  print_r($_POST);
  print_r($_FILES['avatar']);
  echo '</pre>';
  $req = ob_get_contents();
  ob_end_clean();
  echo json_encode($req); // вернем полученное в ответе
  exit;
}

Вот такие нехитрые манипуляции позволяют отправить без перезагрузки страницы данные из формы вместе с загружаемым файлом.