Как сделать форму обратной связи с загрузкой нескольких изображений?

308
12 января 2017, 03:50

Саму форму и загрузку нескольких изображений я делаю так:

#feedback-form { 
  /* вся форма */ 
  max-width: 550px; 
  padding: 2%; 
  border-radius: 3px; 
  background: #f1f1f1; 
} 
#feedback-form label { 
  /* наименование полей */ 
  float: left; 
  display: block; 
  clear: right; 
} 
#feedback-form .w100 { 
  /* поля */ 
  float: right; 
  max-width: 400px; 
  width: 97%; 
  margin-bottom: 1em; 
  padding: 1.5%; 
} 
#feedback-form .border { 
  /* граница полей */ 
  border-radius: 1px; 
  border-width: 1px; 
  border-style: solid; 
  border-color: #C0C0C0 #D9D9D9 #D9D9D9; 
  box-shadow: 0 1px 1px rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .1) inset; 
} 
#feedback-form .border:focus { 
  outline: none; 
  border-color: #abd9f1 #bfe3f7 #bfe3f7; 
} 
#feedback-form .border:hover { 
  border-color: #7eb4ea #97cdea #97cdea; 
} 
#feedback-form .border:focus::-moz-placeholder { 
  /* убрать при фокусе первоначальный текст поля */ 
  color: transparent; 
} 
#feedback-form .border:focus::-webkit-input-placeholder { 
  color: transparent; 
} 
#feedback-form .border:not(:focus):not(:hover):valid { 
  /* правильно заполненные поля */ 
  opacity: .8; 
} 
#submitFF { 
  /* кнопка "Отправить" */ 
  padding: 2%; 
  border: none; 
  border-radius: 3px; 
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .2) inset; 
  background: #669acc; 
  color: #fff; 
} 
#feedback-form br { 
  height: 0; 
  clear: both; 
} 
#submitFF:hover { 
  background: #5c90c2; 
} 
#submitFF:focus { 
  box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0, 0, 0, .8), inset 0 -1px 0 rgba(0, 0, 0, .05); 
}
<form enctype="multipart/form-data" method="post" id="feedback-form"> 
  <label for="nameFF">Имя:</label> 
  <input type="text" name="nameFF" id="nameFF" required placeholder="например, Иван Иванович Иванов" x-autocompletetype="name" class="w100 border"> 
  <label for="contactFF">Email:</label> 
  <input type="email" name="contactFF" id="contactFF" required placeholder="например, ivan@yandex.ru" x-autocompletetype="email" class="w100 border"> 
  <label for="fileFF">Прикрепить файл:</label> 
  <input type="file" name="fileFF[]" multiple id="fileFF" class="w100"> 
  <label for="messageFF">Сообщение:</label> 
  <textarea name="messageFF" id="messageFF" required rows="5" placeholder="Детали заявки…" class="w100 border"></textarea> 
  <br> 
  <input value="Отправить" type="submit" id="submitFF"> 
</form>

Код contacts.php:

<?php 
if (isset ($_POST['contactFF'])) { 
  $to = "name@yandex.ru"; 
  $from = $_POST['contactFF']; 
  $subject = "Заполнена контактная форма с ".$_SERVER['HTTP_REFERER']; 
  $message = "Имя: ".$_POST['nameFF']."\nEmail: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF']; 
  $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"; 
  for($i=0;$i<count($_FILES['fileFF']['name']);$i++) { 
     if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) { 
         $attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i]))); 
         $filename = $_FILES['fileFF']['name'][$i]; 
         $filetype = $_FILES['fileFF']['type'][$i]; 
         $filesize += $_FILES['fileFF']['size'][$i]; 
         $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 МБ.'; 
  } 
} 
?>

Мне необходимо чтобы была последовательная загрузка изображений с превью, как здесь (кликнуть на + и загружать следующее изображение):

Очень надеюсь на помощь. Может есть готовые решения или примеры..

Answer 1

Почитай о FormData, в руководстве mozilla все отлично написано, собственно пример коротко

var form = document.getElementById("feedback-form");
xhr = new XMLHttpRequest();
xhr.open("POST", "contacts.php");
xhr.send(new FormData(form));

Получить привьюшки можно при помощи объекта FileReader перехватив действие change у <input type="file" >

Ну и еще ты спрашивал библиотеки, их так много что не перечесть, например

READ ALSO
Как связать плагин Dropzone.js с обычной формой обратной связи?

Как связать плагин Dropzone.js с обычной формой обратной связи?

Мне нужно реализовать возможность отправки нескольких изображений + введенные данные (имя, телефон и тд)

590
Включение и выключение таблиц стилей

Включение и выключение таблиц стилей

Как можно сделать переключение css не input-ом, а списком li ну или хотябы ссылкойТ

292
Проблемы с отображением шрифта

Проблемы с отображением шрифта

При подключении шрифта в таком варианте

339
Сборщик мусора вызывает CallbackOnCollectedDelegate

Сборщик мусора вызывает CallbackOnCollectedDelegate

В проекте нужно перехватывать глобально нажатие определенной клавиши, на определенном этапе приложение на третьем нажатии начало выдавать...

443