Форма обратной связи с прикреплением файла (Send attachments with PHP Mail())

16.07.2017

Форма обратной связи с прикреплением файла (attach)

Самый простой внешний вид формы обратной связи с тремя полями и полем для прикрепления файла:

<form id="feedback-form" enctype="multipart/form-data" method="post">
  <div class="form-group">
    <label for="nameFF">Name</label>
    <input id="nameFF" name="nameFF" type="text" placeholder=" " required>
  </div>
  <div class="form-group">
    <label for="contactFF">E-mail</label>
    <input id="contactFF" name="contactFF" type="email" placeholder=" " required>
  </div>
  <div class="form-group">
    <label for="projectFF">About your Project</label>
    <input id="projectFF" name="projectFF" type="text" placeholder=" " required>
  </div>
  <div class="control-file">
    <label for="fileFF">Attach file</label>
    <input id="fileFF" name="fileFF" type="file">
  </div>
  <button class="btn" type="submit" id="submitFF">Send</button>
</form>

Даже добавим пару правил для стилей, чтобы форма была понятного вида:

<style>
  label{
    display: block;
    margin: 20px 0 2px;
  }
  .btn{
    margin: 20px 0 0;
  }
</style>

Самое главное содержимое файла mail.php

<?php
if (isset ($_POST['contactFF'])) {
  $to = "to@gmail.com";
  $from = "from@gmail.com";
  $subject = "Заполнена контактная форма на сайте ".$_SERVER['HTTP_REFERER'];
  $message = "Имя: ".$_POST['nameFF']."\nКонтакты ".$_POST['contactFF']."\nПроект: ".$_POST['projectFF']."\n\nIP: ".$_SERVER['REMOTE_ADDR'];

  $boundary = md5(date('r', time()));
  $filesize = '';
  $headers = "MIME-Version: 1.0\r\n";
  $headers .= "From: " . $from . "\r\n";
  $headers .= "Reply-To: " . $from . "\r\n";
  $headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n";
  $message="
Content-Type: multipart/mixed; boundary=\"$boundary\"

--$boundary
Content-Type: text/plain; charset=\"utf-8\"
Content-Transfer-Encoding: 7bit

$message";
     if(is_uploaded_file($_FILES['fileFF']['tmp_name'])) {
         $attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'])));
         $filename = $_FILES['fileFF']['name'];
         $filetype = $_FILES['fileFF']['type'];
         $filesize = $_FILES['fileFF']['size'];
         $message.="

--$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=\"$filename\"

$attachment";
     }
   $message.="
--$boundary--";

  if ($filesize < 10000000) { // проверка на общий размер всех файлов. Многие почтовые сервисы не принимают вложения больше 10 МБ
    mail($to, $subject, $message, $headers);
    echo $_POST['nameFF'].', Ваше сообщение отправлено, спасибо!';
  } else {
    echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.';
  }
}
?>

Содержимое файла mail.js, перед подключением этого файла, подключаем jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Затем скрипт mail.js

$(function() {

  // E-mail Ajax Send
  // http://denis-creative.com/contact-form-with-attached-file/
  // http://shpargalkablog.ru/2014/05/email-file-php.html
  // http://shpargalkablog.ru/2014/05/feedback-form-file.html
  document.getElementById('feedback-form').addEventListener('submit', function(evt){
    var http = new XMLHttpRequest(), f = this;
    var th = $(this);
    evt.preventDefault();
    http.open("POST", "mail.php", true);
    http.onreadystatechange = function() {
      if (http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
        if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поля формы, если в ответе первым словом будет имя отправителя (nameFF)
          th.trigger("reset");
        }
      }
    }
    http.onerror = function() {
      alert('Извините, данные не были переданы');
    }
    http.send(new FormData(f));
  }, false);

});

Полезная инфа:

Оставить комментарий