Форма обратной связи 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 'Отправлено письмо с вложениями.';
}
}
?>
