Dropzone 表单验证答案

【问题标题】：Dropzone form validationDropzone 表单验证
【发布时间】：2014-01-10 15:04:40
【问题描述】：

我正在使用 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>

上传.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
  });
 }

}

【问题讨论】：

标签： javascript php

【解决方案1】：

我今天遇到了类似的问题。在我的情况下，表单是使用 Zend Form Builder 构建的（进行所有验证，...）使其简短（至少尽可能短）：

我将表单的现有文件上传字段更改为标准文本输入字段（甚至可能被隐藏）-作为必填字段。
在表单上方添加了 dropzone，创建了所需的 PHP 操作，它只将文件从 php-tmp 文件夹移动到我自己的 tmp 文件夹（特定于项目），然后 返回新的路径/文件名为 json
在 js 中，我在 dropzone 中添加了一个“on succes”函数，该函数采用 json 结果 并将其 附加到我的输入字段的内容（从 1 开始）
我的实际表单的 Action 采用这些路径执行一些其他操作（例如生成用户文件夹，...）并将这些文件（通过 dropzone 上传）移动到这些新文件夹中。

希望我能帮上点忙；）

【讨论】：

这是我用于 ZF2 和 dropzone 的方法 - 它看起来过于复杂但有效（在我删除学说实体后仍然需要处理删除文件）

【解决方案2】：

Dropzone.js 是一个异步框架。如果你使用这种脚本，你必须以这种方式使用它。

您可以使用 JQUERY（AJAX 库）。使用 Jquery，您可以在检查字段中验证您的值并同时在服务器上向您发送图片。

希望对你有帮助

【讨论】：