Javascript Dropzone表单验证

我正在使用dropzone.js创建一个dropzone表单。当表单提交为空时，表单提交到空ULR失败。如何重新验证表单以检查字段是否为空

这是我的密码。谢谢你的帮助

HTML代码（index.php）

无标题文件

提交数据和文件！

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

}

新的JS custom.dropzone.JS似乎破坏了upload.php函数
Dropzone.options.myAwesomeDropzone={//表单元素ID的简化版本
//我们上面讨论过的配置
自动处理队列：false，
并行上传：3，
maxFiles:3，
PreviewContainer:“.dropzone预览”，
接受：函数（文件，完成）{
控制台日志（“上传”）；
完成（）；
},
init:function（）{
此.on（“MaxFilesExcepended”，函数（文件）{
警告（“请不要再有文件了！”）；
});
},
//dropzone的设置
init:function（）{
var myDropzone=this；
//首先更改按钮以实际通知Dropzone处理队列。
this.element.querySelector（“按钮[type=submit]”）。addEventListener（“单击”，函数（e）{
//确保表单没有实际发送。
e、 预防默认值（）；
e、 停止传播（）；
myDropzone.processQueue（）；
});
//收听sendingmultiple事件。在本例中，它是sendingmultiple事件
//因为uploadMultiple设置为true，所以发送事件的。
this.on（“sendingmultiple”，function（））{
//在实际发送表单时触发。
//隐藏成功按钮或完整表单。
});
此.on（“successmultiple”，函数（文件、响应）{
//在成功发送文件时触发。
//重定向用户或通知成功。
});
此.on（“errormultiple”函数（文件、响应）{
//在发送文件时出错时触发。
//可能会再次显示表单，并通知用户错误
});
}
}

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

您可以使用JQUERY（AJAX库）。 使用Jquery，您可以在checkfield中验证您的值，同时将图片发送到服务器上

---

希望对您有所帮助

我今天遇到了类似的问题。 在我的例子中，表单是使用Zend Form Builder构建的（执行所有验证，…） 要使其简短（至少尽可能简短）：

我将表单的现有文件上载字段更改为标准文本输入字段（甚至可能隐藏），作为必填字段

在表单上方添加了dropzone，创建了所需的PHP操作，该操作只会将文件从PHP tmp文件夹移动到我自己的tmp文件夹（特定于项目），然后将新路径/文件名返回为json

在js中，我在dropzone中添加了一个“on success”函数，它接受json结果，并将其附加到输入字段的内容中（从1开始）

我的实际表单的操作是通过这些路径执行一些其他操作（如生成用户文件夹等），并将这些文件（通过dropzone上载）移动到这些新文件夹中

---

希望我至少能帮点忙；）

这是我在ZF2和dropzone中使用的方法-它似乎过于复杂，但仍然有效（在我删除doctrine实体后，仍然需要处理删除文件的问题）

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

}