Skip to content

Instantly share code, notes, and snippets.

@belocer

belocer/index.php

Created July 31, 2020 12:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save belocer/dd26ab3ba2ad13dba70bea41b9ec35e8 to your computer and use it in GitHub Desktop.
Save belocer/dd26ab3ba2ad13dba70bea41b9ec35e8 to your computer and use it in GitHub Desktop.
Download ZIP
Отправка файлов по ajax на E-mail
Raw
index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="wrapper" style="margin-top: 50px;">
<div class="wa-form">
<form enctype="multipart/form-data" method="post" action="/sendmail/send.php">
<div class="wa-field">
<div class="wa-name">Номер заказа </div>
<div class="wa-value"><input name="order" type="text" value="ВЕ"></div>
</div>
<div class="wa-field">
<div class="wa-name">ФИО:</div>
<div class="wa-value"><input name="name" type="text" value=""></div>
</div>
<div class="wa-field">
<div class="wa-name">Номер телефона:</div>
<div class="wa-value">
<input name="phone" type="phone" value="">
</div>
</div>
<div class="wa-field">
<div class="wa-name">Email:</div>
<div class="wa-value">
<input name="email" type="email" value="">
</div>
</div>
<div class="wa-field">
<div class="wa-name">Название модели / ссылка на сайте:</div>
<div class="wa-value">
<input type="hidden" name="subject" value="Website request">
<textarea name="body"></textarea>
</div>
</div>
<div class="wa-field">
<div class="wa-name">Дата покупки товара / дата получения в ТК:</div>
<div class="wa-value">
<input name="datePurchase" type="date" value="">
</div>
</div>
<div class="wa-field">
<div class="wa-name">Номер гарантийного талона:</div>
<div class="wa-value">
<div class="wa-value"><input name="garantNumber" type="text" value=""></div>
</div>
</div>
<div class="wa-field">
<div class="wa-name">Подробное описание рекламации:</div>
<div class="wa-value">
<input type="hidden" name="subject" value="Website request">
<textarea name="comment"></textarea>
</div>
</div>
<div class="wa-field">
<div class="wa-name">Фото/видео материалы (ссылки):</div>
<div class="wa-value">
<input type="file" name="pictures[]">
<input type="file" name="pictures[]">
<input type="file" name="pictures[]">
<input type="file" name="pictures[]">
<input type="file" name="pictures[]">
<input type="file" name="pictures[]">
</div>
</div>
<div class="wa-field">
<div class="wa-name">Желаемое решение проблемы</div>
<div class="wa-value">
<select name="select-choice">
<option value="Скидка" selected="">Скидка</option>
<option value="Подарок">Подарок</option>
<option value="Ремонт">Ремонт</option>
</select>
</div>
</div>
<div class="wa-field">
<div class="wa-value wa-submit">
<!--<input type="submit" value="Отправить" name="send">-->
<input type="submit" name="send">
<p align="justify"><span style="font-size: 9px;">Нажимая на кнопку, вы соглашаетесь на обработку персональных данных в соответствии с <a href="https://mir-sporta.com/politika-konfidentsialnosti/" target="_blank">Политикой конфиденциальности</a></span></p>
</div>
</div>
</form>
</div>
</div>
<script src="js/send_mail.js"></script>
</body>
</html>
Raw
send_mail.js
window.addEventListener('load', () => {
let send_mail_id = document.querySelector('form[method=post]')
if (send_mail_id) {
send_mail_id.addEventListener('submit', send_mail)
}
function send_mail (e) {
e.preventDefault()
let order_inp = document.querySelector('[name=order]') ? document.querySelector('[name=order]').value : '-'
let name_inp = document.querySelector('[name=name]') ? document.querySelector('[name=name]').value : '-'
let phone_inp = document.querySelector('[name=phone]') ? document.querySelector('[name=phone]').value : '-'
let email_inp = document.querySelector('[name=email]') ? document.querySelector('[name=email]').value : '-'
let body_textarea = document.querySelector('[name=body]') ? document.querySelector('[name=body]').value : '-'
let datePurchase_inp = document.querySelector('[name=datePurchase]') ? document.querySelector('[name=datePurchase]').value : '-'
let garantNumber_inp = document.querySelector('[name=garantNumber]') ? document.querySelector('[name=garantNumber]').value : '-'
let comment_textarea = document.querySelector('[name=comment]') ? document.querySelector('[name=comment]').value : '-'
let select_choice_select = document.querySelector('[name=select-choice]') ? document.querySelector('[name=select-choice]').value : '-'
let form = document.querySelector('form[method=post]').children[8]
let pictures1 = form.lastElementChild.children[0].files[0]
let pictures2 = form.lastElementChild.children[1].files[0]
let pictures3 = form.lastElementChild.children[2].files[0]
let pictures4 = form.lastElementChild.children[3].files[0]
let pictures5 = form.lastElementChild.children[4].files[0]
let pictures6 = form.lastElementChild.children[5].files[0]
let data = new FormData()
data.append('order_inp', order_inp)
data.append('name_inp', name_inp)
data.append('phone_inp', phone_inp)
data.append('email_inp', email_inp)
data.append('body_textarea', body_textarea)
data.append('datePurchase_inp', datePurchase_inp)
data.append('garantNumber_inp', garantNumber_inp)
data.append('comment_textarea', comment_textarea)
data.append('select_choice_select', select_choice_select)
data.append('pictures1', pictures1)
data.append('pictures2', pictures2)
data.append('pictures3', pictures3)
data.append('pictures4', pictures4)
data.append('pictures5', pictures5)
data.append('pictures6', pictures6)
let notice = document.querySelector('form[method=post]').lastElementChild.firstElementChild
let div = document.createElement('DIV')
div.setAttribute('style', 'font-size: 20px; color: darkred;')
div.textContent = 'Заявка отправляется, - ожидайте!'
notice.appendChild(div)
document.querySelector('form[method=post]').lastElementChild.firstElementChild.firstElementChild.setAttribute('disabled', 'disabled')
fetch('send_mail.php',
{
method: 'POST',
body: data
})
.then(response => {
if (response.status !== 200) {
return Promise.reject()
}
return response.status
})
.then(function (data) {
if (data == 200) {
console.log('good send');
alert('Заявка отправлена');
notice.lastElementChild.style.display = 'none'
}
})
.catch(() => {
console.log('bad send')
alert('Заявка НЕ отправлена!');
notice.lastElementChild.style.display = 'none'
})
}
})
Raw
send_mail.php
<?php
$files = $_FILES['attachfile'];
$data_json = json_encode($_POST, JSON_UNESCAPED_UNICODE);
$data_form = json_decode($data_json);
/*echo '<pre>';
//print_r($data_json);
print_r($data_form);
echo '</pre>';
die();*/
// Отправка E-mail
$name_label_email = 'Обращение с : ' . $_SERVER['SERVER_NAME'];
//require_once('phpmailer/PHPMailerAutoload.php');
require "phpmailer/class.phpmailer.php";
require "phpmailer/class.smtp.php";
$mail = new PHPMailer;
try {
$msg = "okeykey";
$mail->CharSet = 'utf-8';
// Настройки SMTP
$mail->isSMTP();
$mail->SMTPAuth = true;
$mail->SMTPDebug = 0;
$mail->Host = 'smtp.yandex.ru';
$mail->Port = 465;
$mail->Username = 'beloc@ya.ru';
$mail->Password = 'password';
$mail->SMTPSecure = "ssl"; // or ssl
// От кого письмо
$mail->setFrom('beloc@ya.ru');
// Устанавливаем формат сообщения в HTML
$mail->isHTML(true);
// Тема письма
$mail->Subject = $name_label_email;
// Тело письма
require_once('./template_mail.php');
$body_letter = template_email($data_form);
$mail->Body = $body_letter;
/*
$data_form = implode(' -|- ', $_POST);
$mail->Body = $data_form;*/
// Прикрипление файлов к письму
if (isset($_FILES['pictures1'])) {
$mail->AddAttachment($_FILES['pictures1']['tmp_name'], $_FILES['pictures1']['name']);
}
if (isset($_FILES['pictures2'])) {
$mail->AddAttachment($_FILES['pictures2']['tmp_name'], $_FILES['pictures2']['name']);
}
if (isset($_FILES['pictures3'])) {
$mail->AddAttachment($_FILES['pictures3']['tmp_name'], $_FILES['pictures3']['name']);
}
if (isset($_FILES['pictures4'])) {
$mail->AddAttachment($_FILES['pictures4']['tmp_name'], $_FILES['pictures4']['name']);
}
if (isset($_FILES['pictures5'])) {
$mail->AddAttachment($_FILES['pictures5']['tmp_name'], $_FILES['pictures5']['name']);
}
if (isset($_FILES['pictures6'])) {
$mail->AddAttachment($_FILES['pictures6']['tmp_name'], $_FILES['pictures6']['name']);
}
$mail->addAddress('beloc@mail.ru', 'mir-sporta.com');
//$mail->addAddress('service@mir-sporta.com', 'mir-sporta.com');
$mail->send();
echo 'access';
} catch (Exception $e) {
echo "error: {$mail->ErrorInfo}";
}
?>
Raw
template_mail.php
<?php
function template_email($data_form)
{
$str = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="margin: 0 auto;padding: 20px 0;background: #ffffff;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#eeeeee" class="wrap-table-email" style="max-width: 600px;min-width: 320px;width: 100%;border-collapse: collapse;border-spacing: 0;margin: 0 auto;padding: 0;
mso-table-lspace: 0pt;mso-table-rspace: 0pt;background: #F5F5F5;">
<tbody>
<tr>
<td class="wrap-td-header" style="margin: 0;padding: 0;">
<table class="table-header" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#256AA2" style="border-collapse: collapse;border-style: hidden;max-width: 600px;min-width: 320px;width: 100%;border-collapse: collapse;border-spacing: 0;margin: 0 auto;padding: 0; mso-table-lspace: 0pt;mso-table-rspace: 0pt;background: #256AA2;color: #ffffff;">
<tbody>
<tr>
<td class="td-header" align="center" color="#ffffff" style="margin: 0;padding: 15px 0;font-family: Arial, Verdana, sans-serif;color: #ffffff;font-size: 16px;line-height: 22px;mso-line-height-rule: exactly;font-style: normal;font-weight: bold;letter-spacing: normal;text-align: left;text-indent: 5px;">
Обращение с сайта: ' . $_SERVER['SERVER_NAME'] . '
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="wrap-td-content" style="margin: 0;padding: 0;">
<table class="table-content" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#eeeeee" style="border-collapse: collapse;border-style: hidden;max-width: 600px;min-width: 320px;width: 100%;border-collapse: collapse;border-spacing: 0;margin: 0 auto;padding: 0; mso-table-lspace: 0pt;mso-table-rspace: 0pt;background: #F5F5F5;">
<tbody>
<tr>
<td class="td-content-img" style="margin: 0;padding: 0;">
<h2 style="display: block;margin: 22px auto;padding: 0;text-align: left;font-size: 24px;line-height: 22px;font-family: Arial, Verdana, sans-serif;text-indent: 5px;">Данные из формы обращения:</h2>
</td>
</tr>
<tr>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">Имя: </p></td>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">' . $data_form->name_inp . '</p></td>
</tr>
<tr>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">Заказ: </p></td>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">' . $data_form->order_inp . '</p></td>
</tr>
<tr>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">Телефон: </p></td>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">' . $data_form->phone_inp . '</p></td>
</tr>
<tr>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">E-mail: </p></td>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">' . $data_form->email_inp .'</p></td>
</tr>
<tr>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">Подробное описание рекламации: </p></td>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">' . $data_form->comment_textarea .'</p></td>
</tr>
<tr>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">Название модели / ссылка на сайте: </p></td>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">' . $data_form->body_textarea .'</p></td>
</tr>
<tr>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">Дата покупки товара / дата получения в ТК: </p></td>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">' . $data_form->datePurchase_inp .'</p></td>
</tr>
<tr>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">Номер гарантийного талона: </p></td>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">' . $data_form->garantNumber_inp .'</p></td>
</tr>
<tr>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">Желаемое решение проблемы: </p></td>
<td style="border:inset #333333 1.0pt;padding:3.75pt 3.75pt 3.75pt 3.75pt"><p
class="MsoNormal">' . $data_form->select_choice_select .'</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody></table></body></html>';
return $str;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment