PHP Lang
  1. PHP Lang
  3. Валидация формы Dropzone
Intereting Posts
Как написать байт по байту в сокет в PHP? Internet Explorer 8 не передает cookie сеанса для запроса ajax Как заставить код работать с многомерными массивами? Как вы генерируете случайное число по 32-битовому пределу в PHP? Неизвестное имя столбца при импорте таблицы Как вы получаете информацию пользователя facebook и вставляете ее в базу данных? Регулярное выражение, преобразующее текстовые списки в html в PHP Сравнение PHP и 2 многомерных массивов на основе двух ключевых значений Неустранимая ошибка «Файл / Итератор / Autoload.php» не найден при запуске phpunit Нежелательная новая строка, возвращенная после запроса AJAX MySQL: определение основного ключа таблицы динамически Узел чтения SimpleXML с переносным именем Лучший учебник для Android and php mysql Ассоциативный массив – перемещение элемента в первую позицию что произойдет, если php.ini отсутствует?

Валидация формы Dropzone

Я создаю форму зоны падения с помощью dropzone.js. Когда форма отправляется пустым, форма не выполняется, отправляя на пустой ULR. Как я могу переопределить форму для проверки полей, которые не являются пустыми?

Это мой код. Спасибо за помощь.

HTML-код (index.php) 

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <head> <link href="../CSS/dropzone.css" type="text/css" rel="stylesheet" /> </head> <body> 

 <form id="uploader" class="dropzone" action="upload.php"><BR> <BR> <div class="dropzone-previews"></div><BR><BR> <!-- this is were the previews should be shown. --> <div id="previews" class="dropzone-previews"></div> <!-- Now setup your input fields --> <input type="email" name="username" /> <input type="password" name="password" /> <input type="hidden" name="additionaldata" value="1" /> <button type="submit">Submit data and files!</button> </form> </body> </html>

upload.php 

 <?php $ds = DIRECTORY_SEPARATOR; //1 $storeFolder = '../upload_test/uploads'; //2 if (!empty($_FILES)) { $tempFile = $_FILES['file']['tmp_name']; //3 $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds; //4 $targetFile = $targetPath. $_FILES['file']['name']; //5 $allowed = array('gif','png' ,'jpg'); $filename = $_FILES['file']['name']; $ext = pathinfo($filename, PATHINFO_EXTENSION); if(!in_array($ext,$allowed) ) { echo 'error'; move_uploaded_file($tempFile,$targetFile); //6 } ?> NEW JS custom.dropzone.js which seems to break the upload.php function Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element // The configuration we've talked about above autoProcessQueue: false, parallelUploads: 3, maxFiles: 3, previewsContainer: ".dropzone-previews", accept: function(file, done) { console.log("uploaded"); done(); }, init: function() { this.on("maxfilesexceeded", function(file){ alert("No more files please!"); }); }, // The setting up of the dropzone init: function() { var myDropzone = this; // First change the button to actually tell Dropzone to process the queue. this.element.querySelector("button[type=submit]").addEventListener("click", function(e) { // Make sure that the form isn't actually being sent. e.preventDefault(); e.stopPropagation(); myDropzone.processQueue(); }); // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead // of the sending event because uploadMultiple is set to true. this.on("sendingmultiple", function() { // Gets triggered when the form is actually being sent. // Hide the success button or the complete form. }); this.on("successmultiple", function(files, response) { // Gets triggered when the files have successfully been sent. // Redirect user or notify of success. }); this.on("errormultiple", function(files, response) { // Gets triggered when there was an error sending the files. // Maybe show form again, and notify user of error }); } }

Сегодня я столкнулся с подобной проблемой. В моем случае Form был построен с Zend Form Builder (делая всю проверку, …), чтобы сделать его коротким (по крайней мере, как можно короче):

  1. я изменил существующее поле fileupload моей формы на стандартное поле ввода текста (возможно, даже скрыто) – как обязательное поле .
  2. Добавлена dropzone над формой, создала требуемое действие PHP, которое ничего не делает, но перемещает файлы из папки php-tmp в мою собственную папку tmp (зависит от проекта), а затем возвращает новый путь / имя файла как json
  3. в js я добавил функцию «on succes» в мою dropzone, которая принимает результат json и добавляет его к содержимому моего поля ввода (от 1)
  4. Действие моей фактической формы принимает эти пути, делает некоторые другие вещи (например, создание пользовательских папок, …) и перемещает эти файлы (загруженные через dropzone) в эти новые папки.

Надеюсь, я смогу хотя бы немного помочь;)

Dropzone.js является асинхронной структурой. если вы используете такой скрипт, вы должны использовать его, думая таким образом.

Вы можете использовать JQUERY (библиотека AJAX). С помощью JQuery вы можете подтвердить свою ценность на своем поле и отправить изображение на сервер одновременно.

Надеюсь, это поможет вам