2014-01-10 2 views
1

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

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

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 
    }); 
} 

} 

ответ

2

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

  1. я изменил существующий fileuploadfield моей формы до стандартное поле ввода текста (возможно, даже скрыто) - в качестве обязательного поля.
  2. Добавлено Dropzone над формой, создал необходимый PHP Action, который не делает ничего, но переместить файлы из папки PHP-TMP в моей папке TMP (для конкретного проекта), а затем возвращает новый путь/имя файла в формате JSON
  3. в JS Я добавил функцию «на Succes» на мой DropZone, который принимает результат JSon и присоединяет его к содержанию моего поля ввода (от 1)
  4. Действие моей реальной формы принимает эти пути делает некоторые другие вещи (такие как создание пользовательских папок, ...) и перемещает эти файлы (загруженные с помощью dropzone) в те ne w.

Надежда я мог по крайней мере немного;)

+1

Это метод я использую для ZF2 и DropZone - это кажется слишком сложным, но работает (ну еще нужно обрабатывать удаление файла после того, как удалить доктрина) – dan2k3k4

1

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

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

Надеется, что это помогает вам

Смежные вопросы