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

590
12 января 2017, 03:49

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

Загрузку изображений я реализовал через Dropzone.js (http://www.dropzonejs.com/), но вот как отправить эти файлы - ума не приложу.

	 //Моя форма 
	$("#form").submit(function() { 
	  $.ajax({ 
	    type: "POST", 
	    url: "mail.php", 
	    data: $(this).serialize() 
	  }).done(function() { 
	    $(this).find("input").val(""); 
	    alert("Спасибо за заявку! Скоро мы с вами свяжемся."); 
	    $("#form").trigger("reset"); 
	  }); 
	  return false; 
	}); 
 
	 //Подключение скрипта Dropzone 
	var Dropzone = require("dropzone"); 
	Dropzone.options.myAwesomeDropzone = { 
	  paramName: "file", // The name that will be used to transfer the file 
	  maxFilesize: 2, // MB 
	  accept: function(file, done) { 
	    if (file.name == "justinbieber.jpg") { 
	      done("Naha, you don't."); 
	    } else { 
	      done(); 
	    } 
	  } 
	};
<form method="post" action="mail.php" class="dropzone" id="form"> 
  <input type="text" name="name" placeholder="Ваше имя" required /> 
  <br /> 
  <input type="text" name="phone" placeholder="Ваш телефон" required /> 
  <br /> 
  <div class="fallback"> 
    <input name="file" type="file" multiple /> 
  </div> 
  <button>Отправить</button> 
</form>

Файл mail.php:

<?php 
 
$recepient = "agragregra@ya.ru"; 
$sitename = "Название сайта"; 
 
$name = trim($_POST["name"]); 
$phone = trim($_POST["phone"]); 
$text = trim($_POST["text"]); 
$message = "Имя: $name \nТелефон: $phone \nТекст: $text"; 
 
$pagetitle = "Новая заявка с сайта \"$sitename\""; 
mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");

Помогите, пожалуйста, решить эту проблему. Кучу времени убил на поиск решения.

Answer 1

Александр, к сожалению, я тоже не особо понимаю PHP, но я вижу, что вы должны дописать свой php скрипт (c js вроде бы все в порядке), в данный момент он не пригоден для работы. Используйте для работы с почтой PHPMailer.
Вам нужно принять файл через глобальный массив $_FILES[], сделать с ними проверки и если они все подходят, отправить эти файлы через метод addAttachment();
Используя цикл добавить их всех к письму и уже отправлять.

Я рекомендую прочитать вот эти небольшие статьи, чтоб лучше понимать как работает прием FILES

  • Загрузка на сервер нескольких файлов
  • Загрузка файлов методом POST
  • А здесь человек показ примеры проверок Basic File Uploading Using PHP

Рекомендую прочитать это все на свежую голову, потому, что статьи простые и понятные.

Я бы сделал примерно так (набрасал код, обычным копированием)
Форма

<form action="file-upload.php" method="post" enctype="multipart/form-data">
  Файлы:<br />
  <input name="photo[]" type="file" /><br />
  <input type="submit" value="Отправить" />
</form>

FILE-UPLOAD.php

<?php
 require 'PHPMailerAutoload.php';
    if($_FILES['photo']['name'])
{
    //if no errors...
    if(!$_FILES['photo']['error'])
    {
        //now is the time to modify the future file name and validate the file
      $mail = new PHPMailer;

        $mail->isSMTP();                                      // Set mailer to use SMTP
        $mail->Host = 'smtp1.example.com;smtp2.example.com';  // Specify main and backup SMTP servers
        $mail->SMTPAuth = true;                               // Enable SMTP authentication
        $mail->Username = 'user@example.com';                 // SMTP username
        $mail->Password = 'secret';                           // SMTP password
        $mail->SMTPSecure = 'tls';                            // Enable TLS encryption, `ssl` also accepted
        $mail->Port = 587;                                    // TCP port to connect to
        $mail->setFrom('from@example.com', 'Mailer');
        $mail->addAddress('joe@example.net', 'Joe User');     // Add a recipient
        $mail->addAddress('ellen@example.com');               // Name is optional
        $mail->addReplyTo('info@example.com', 'Information');
        $mail->addCC('cc@example.com');
        $mail->addBCC('bcc@example.com');
        foreach($_FILES['photo']['tmp_name'] as $key => value) {
                $mail->addAttachment($value, "photo-{$key}.jpg");    // Optional name
        }
        $mail->isHTML(true);                                  // Set email format to HTML
        $mail->Subject = 'Here is the subject';
        $mail->Body    = 'This is the HTML message body <b>in bold!</b>';
        $mail->AltBody = 'This is the body in plain text for non-HTML mail clients';
        if(!$mail->send()) {
                echo 'Message could not be sent.';
                echo 'Mailer Error: ' . $mail->ErrorInfo;
        } else {
                echo 'Message has been sent';
        }
    }
}
READ ALSO
Включение и выключение таблиц стилей

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

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

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

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

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

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

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

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

443
TimeLine в виде кадров из mediaelementa

TimeLine в виде кадров из mediaelementa

На скрине ниже есть таймлайн в виде кадров, как сделать такой же? Любые идеиСамо приложение называется Effects Videos – Filters for Videos из винстора и судя...

276