Данный скрипт идеально подойдет для landing page, сайтов-визиток, каталогов, где нужно отправить простую форму с прикрепленным файлом. В скрипте используется проверка заполненности обязательных полей с помощью скрипта jquery.validation с последующей отправкой сообщения на e-mail администратора без перезагрузки страницы с помощью технологии ajax.

 

Демо-страницу можно посмотреть — тут.

Ссылку на скачивание архива найдете в конце статьи.

Рассмотрим работу скрипта на примере:

Дана форма с полями: Имя, Телефон, Е-mail и "Описание заказа".

 

Код формы:

<form action="#" method="post" id="sendform" enctype="multipart/form-data">
  <fieldset>
    <h3>Форма заказа</h3>
    <p>
      <label>Имя*:</label>
      <input name="name" value="" size="40" type="text" class="required" />
    </p>

    <p> 
      <label>Контактный номер*:</label>
      <input name="tel" value="" size="40" class="required" type="tel" />
    </p>

    <p>
      <label>E-mail:</label>
      <input name="email" value="" size="40" type="email" />
    </p>

    <p>
      <label>Описание заказа:</label>
      <textarea name="message" cols="40" rows="10" /> </textarea>
    </p>

    <p>
      <label>Прикрепить файл:</label>
      <input name="file" value="1" size="40" type="file" />
    </p>

    <input value="Отправить" name="sendMail" type="submit" />
  </fieldset>
</form>

 

В форме, в которой происходит прикрепление файла, обязательно наличие аттрибута enctype=»multipart/form-data».

Javascript

Подключаем библиотеки jQuery и плагин на страницу: (библиотеки можно скачать с официальных сайтов, ссылки приведены внизу статьи)

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>

Про валидацию формы более подробно можно прочитать тут

 

Javascript код для по валидации и ajax-отправки формы

// Как только страничка загрузилась 
  window.onload = function () { 
    // проверяем поддерживает ли браузер FormData 
      if(!window.FormData) {
        /* * если не поддерживает, то выводим 
        * то выводим предупреждение вместо формы */
        var div = ge('content');
        div.innerHTML = "Ваш браузер не поддерживает объект FormData";
        div.className = 'notSupport'; 
      }
  }


$(document).ready(function(){
  // =validation
  var errorTxt = 'Ошибка отправки';
  $("#sendform").validate({
    submitHandler: function(form){
      var form = document.forms.sendform,
        formData = new FormData(form),
        xhr = new XMLHttpRequest();

      xhr.open("POST", "/send.php");
      
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          if(xhr.status == 200) {
            $("#sendform").html('<p class="thank">Данные отправлены!<p>');
          }
        }
      };
      xhr.send(formData);
    }
  }); 
})

 

Разберем более подробно этот код.

Для отправки файлов используется новый интерфейс FormData. После загрузки страницы, с помощью строки if(!window.FormData), проверяем доступность данного объекта. В случае, если он не доступен сообщаем об этом пользователю. Понятно, что в данном случае отправка работать не будет. Это касает для старых браузеров. Для всех современных браузеров все будет работать

При нажатии на кнопку «Отправить» проверяются обязательные поля на заполненность с помощью метода validate и в случае успешной проверки (submitHandler) создается новый объект FormData, происходит вызов скрипта send.php, который и производит отправку форму и прикрепленного к ней файла. Затем вместо формы выводится сообщение об успешной отправке. За это отвечает строка $("#sendform").html('<p class="thank">Данные отправлены!</p>');

 

send.php

PHP-скрипт отправки данных с формы.

<?php
$to = 'info@proverstka.com.ua';

if ( isset( $_POST['sendMail'] ) ) {
  $name  = substr( $_POST['name'], 0, 64 );
  $tel = substr( $_POST['tel'], 0, 64 );
  $email   = substr( $_POST['email'], 0, 64 );
  $message = substr( $_POST['message'], 0, 250 );
 

  if ( !empty( $_FILES['file']['tmp_name'] ) and $_FILES['file']['error'] == 0 ) {
    $filepath = $_FILES['file']['tmp_name'];
    $filename = $_FILES['file']['name'];
  } else {
    $filepath = '';
    $filename = '';
  }
 
  $body = "Имя:\r\n".$name."\r\n\r\n";
  $body .= "Контактный номер:\r\n".$tel."\r\n\r\n";
  $body .= "E-mail:\r\n".$email."\r\n\r\n";
  $body .= "Описание заказа:\r\n".$message;
 
  send_mail($to, $body, $email, $filepath, $filename);

}




// Вспомогательная функция для отправки почтового сообщения с вложением
function send_mail($to, $body, $email, $filepath, $filename)
{
  $subject = 'Тестирование формы с прикреплением файла с сайта proverstka.com.ua';
  $boundary = "--".md5(uniqid(time())); // генерируем разделитель
  $headers = "From: ".$email."\r\n";   
  $headers .= "MIME-Version: 1.0\r\n";
  $headers .="Content-Type: multipart/mixed; boundary=\"".$boundary."\"\r\n";
  $multipart = "--".$boundary."\r\n";
  $multipart .= "Content-type: text/plain; charset=\"utf-8\"\r\n";
  $multipart .= "Content-Transfer-Encoding: quoted-printable\r\n\r\n";

  $body = $body."\r\n\r\n";
 
  $multipart .= $body;
 
  $file = '';
  if ( !empty( $filepath ) ) {
    $fp = fopen($filepath, "r");
    if ( $fp ) {
      $content = fread($fp, filesize($filepath));
      fclose($fp);
      $file .= "--".$boundary."\r\n";
      $file .= "Content-Type: application/octet-stream\r\n";
      $file .= "Content-Transfer-Encoding: base64\r\n";
      $file .= "Content-Disposition: attachment; filename=\"".$filename."\"\r\n\r\n";
      $file .= chunk_split(base64_encode($content))."\r\n";
    }
  }
  $multipart .= $file."--".$boundary."--\r\n";
  mail($to, $subject, $multipart, $headers);
}
?>

 

архив с примером


 

Дополнение от 28.12.2016

 

Отправка формы с прикреплением нескольких файлов

В элементе input, в котором прикрепляем файл, дописываем аттрибут multiple (), что даст возможность выбора одновременно несколько файлов.

Изменяем php файл для обработки массива из нескольких файлов:

<?php
$to = 'info@proverstka.com.ua';

if ( isset( $_POST['sendMail'] ) ) {
	$name	= substr( $_POST['name'], 0, 64 );
	$tel = substr( $_POST['tel'], 0, 64 );
	$email	 = substr( $_POST['email'], 0, 64 );
	$message = substr( $_POST['message'], 0, 250 );

if($_FILES)
{
	$filepath = array();
	$filename = array();
	$file2 = array();
	$i = 0;
		foreach ($_FILES["file"]["error"] as $key => $error) {
			if ($error == UPLOAD_ERR_OK) {
				$filename[$i][0] = $_FILES["file"]["tmp_name"][$key];
				$filename[$i][1] = $_FILES["file"]["name"][$key];
				$i++;
			}
		}
	}

	
	$body = "Имя:\r\n".$name."\r\n\r\n";
	$body .= "Контактный номер:\r\n".$tel."\r\n\r\n";
	$body .= "E-mail:\r\n".$email."\r\n\r\n";
	$body .= "Описание заказа:\r\n".$message; 
	send_mail($to, $body, $email, $filename);
}




// Вспомогательная функция для отправки почтового сообщения с вложением
function send_mail($to, $body, $email, $filename)
{
	$subject = 'Тестирование формы с прикреплением файла с сайта proverstka.com.ua';
	$boundary = "--".md5(uniqid(time())); // генерируем разделитель
	$headers = "From: ".$email."\r\n";	 
	$headers .= "MIME-Version: 1.0\r\n";
	$headers .="Content-Type: multipart/mixed; boundary=\"".$boundary."\"\r\n";
	$multipart = "--".$boundary."\r\n";
	$multipart .= "Content-type: text/plain; charset=\"utf-8\"\r\n";
	$multipart .= "Content-Transfer-Encoding: quoted-printable\r\n\r\n";

	$body = $body."\r\n\r\n";
 
	$multipart .= $body;
	foreach ($filename as $key => $value) {
		$fp = fopen($value[0], "r"); 
		$content = fread($fp, filesize($value[0]));
		fclose($fp);
		$file .= "--".$boundary."\r\n";
		$file .= "Content-Type: application/octet-stream\r\n";
		$file .= "Content-Transfer-Encoding: base64\r\n";
		$file .= "Content-Disposition: attachment; filename=\"".$value[1]."\"\r\n\r\n";
		$file .= chunk_split(base64_encode($content))."\r\n";
	}
	$multipart .= $file."--".$boundary."--\r\n";
	mail($to, $subject, $multipart, $headers);
}
?>

 

архив с примером

 

Демо-пример на отдельной странице

comments powered by HyperComments
Понравился материал - нажмите, пожалуйста, на кнопку
=)