2 марта 2020 PHP jQuery
Мы уже рассматривали, как сделать форму обратной связи на PHP и Ajax. Сегодня мы модернизируем её и научим отправлять приложенные файлы.
HTML-код формы
Добавляем в форму ещё одно поле файл:
JavaScript код с jQuery Ajax
Не забудьте перед кодом подключить библиотеку jQuery!
Отправляем данные с помощью объекта FormData
— предназначенного для кодирования данных, которые необходимо отправить на сервер посредством технологии AJAX (XmlHttpRequest). Для кодирования данных метод FormData
использует формат multipart/form-data
. Это означает то, что можно подготовить для отправки по AJAX не только текстовые данные, но и файлы (input
с атрибутом type="file"
).
$(document).ready(function () { $("form").submit(function () { // Получение ID формы var formID = $(this).attr('id'); // Добавление решётки к имени ID var formNm = $('#' + formID); $.ajax({ type: "POST", url: '/send.php', data: new FormData(formNm), processData: false, contentType: false, beforeSend: function () { // Вывод текста в процессе отправки $(formNm).html('
Отправка...'); }, success: function (data) { // Вывод текста результата отправки $(formNm).html('
'+data+''); }, error: function (jqXHR, text, error) { // Вывод текста ошибки отправки $(formNm).html(error); } }); return false; }); });
PHP обработчик
Файлы, которые будут отправлены, необходимо закодировать в формат base64 и указать в заголовках информацию о том, что в письме присутствуют файлы.
Чтобы отделить закодированный файл от текста письма, необходимо добавить текстовый разделитель, это может быть любая уникальная строка, в нашем случае $boundary = "---";
. Разделитель следует обозначить в отправляемых заголовках, и выводить до и после прикрепления файла в тексте письма.