Форма обратной связи ajax + прикрепление файлов
html код формы:
Подключаем javascript код для обработки отправки письма:
Код скрипта обработчика:
// этот участок кода нужен только для отображения гифки // которая даёт пользователю понять, что что-то происходит // и нужно подождать $(document).ready(function () { $(document).ajaxStart(function () { // найдем элемент с изображением загрузки и уберем невидимость: var imgObj = $("#load-indicator"); imgObj.show(); // вычислим в какие координаты нужно поместить изображение загрузки, // чтобы оно оказалось в серидине страницы: var centerY = $(window).scrollTop() + ($(window).height() + imgObj.height()) / 2; var centerX = $(window).scrollLeft() + ($(window).width() + imgObj.width()) / 2; imgObj.offset({ left: centerX, top: centerY }); }); //скрываем изображение после окончания AJAX-запроса $(document).ajaxStop(function () { $('#load-indicator').hide(); }); }); // назначаем действие на такое событие как отправка формы $('#feedback').submit(function (evtObj) { evtObj.preventDefault(); // Если элемент формы fileforsending содержит значения (т.е. выбран файл для отправки), // то вместо AJAX-запроса используем FormData() // поскольку файлы через AJAX-запросы не передаются if (document.getElementById("feedback").fileforsending.value !== '') { //показываем гифку ожидания var imgObj = $("#load-indicator"); imgObj.show(); var centerY = $(window).scrollTop() + ($(window).height() + imgObj.height()) / 2; var centerX = $(window).scrollLeft() + ($(window).width() + imgObj.width()) / 2; imgObj.offset({ left: centerX, top: centerY }); // этот кусок кода я спёр отсюда http://javascript.ru/forum/jquery/40698-ajax-i-otpravka-fajjlov-s-formy.html var form = document.forms.feedback; var formData = new FormData(form); var xhr = new XMLHttpRequest(); xhr.open("POST", "order.php"); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { data = xhr.responseText; $("#result").html('Результат выполнения: ' + data); // Письмо отправлено, сбрасываем данные формы если прошло успешно if (data === 'Отправлено письмо с вложениями.') { document.getElementById("feedback").reset(); } //убираем гифку ожидания $('#load-indicator').hide(); } } }; xhr.send(formData); // В противном случае (не прикреплён файл для отправки) // Делаем AJAX-запрос для отправки письма } else { var form = $(this); $.ajax({ // Здесь файл, который обрабатывает полученные от пользователя данные и отправляет почту url: 'order.php', type: 'POST', data: form.serialize(), // Действия в случае успешной отправки AJAX-запроса (а не письма!) // Здесь data - полученное от order.php сообщение success: function (data) { if (data === 'Письмо отправлено.') { $("#result").html('Письмо отправлено.'); // Письмо отправлено, сбрасываем данные формы document.getElementById("feedback").reset(); // Следующая строка после успешной отправки сообщения // перенаправляет пользователь на любую страницу/сайт // достаточно раскомментировать её и поменять адрес сайта webware.biz // на ваш собственный //document.location.href = 'http://webware.biz'; } else { $("#result").html(data); } }, error: function (data) { $("#result").html('Результат выполнения: ' + data); } }); } });
Код обработчика order.php:
"; $headers[] = "Bcc: JJ Chong"; $headers[] = "Reply-To: Recipient Name "; $headers[] = "Subject: {$subject}"; $headers[] = "X-Mailer: PHP/" . phpversion(); // собираем текст письма $allmsg = " E-mail: $email
Имя: $name
"; $allmsg = "Обратная связь " . $allmsg . ""; // отправляем if (!mail($to, $subject, $allmsg, implode("\r\n", $headers))) { echo 'Письмо не отправлено - что-то не сработало.'; } else { echo 'Письмо отправлено.'; } } else { // эта часть кода отвечает за отправку сообщений с вложениями // читаем отправляемый файл в строку $fp = fopen($the_file, "r"); if (!$the_file) { die("Ошибка отправка письма: Файл $the_file не может быть прочитан."); } $file = fread($fp, filesize($path)); fclose($fp); // удаляем временный файл unlink($path); // собираем текст письма $allmsg = "E-mail: $email
Имя: $name
"; $allmsg = "Обратная связь " . $allmsg . ""; // генерируем разделитель $boundary = "--" . md5(uniqid(time())); // собираем заголовки $headers = array(); $headers[] = "MIME-Version: 1.0"; $headers[] = "From: $name <$email>"; $headers[] = "Bcc: JJ Chong"; $headers[] = "Reply-To: Recipient Name "; $headers[] = "Subject: {$subject}"; $headers[] = "X-Mailer: PHP/" . phpversion(); $headers[] = "Content-Type: multipart/mixed; boundary=\"$boundary\"\n"; // собираем текст письма + приложенынй файл $multipart = array(); $multipart[] = "--$boundary"; $multipart[] = "Content-Type: text/html; charset=UTF-8"; $multipart[] = "Content-Transfer-Encoding: Quot-Printed\r\n"; $multipart[] = "$allmsg\r\n"; $multipart[] = "--$boundary"; $multipart[] = "Content-Type: application/octet-stream"; $multipart[] = "Content-Transfer-Encoding: base64"; $multipart[] = "Content-Disposition: attachment; filename = \"" . $path . "\"\r\n"; $multipart[] = chunk_split(base64_encode($file)); $multipart[] = "--$boundary"; // отправляем if (!mail($to, $subject, implode("\r\n", $multipart), implode("\r\n", $headers))) { echo 'Письмо не отправлено - что-то не сработало.'; } else { echo 'Отправлено письмо с вложениями.'; } } ?>