Dropzone.js如何在表单字段服务器端验证失败后重新发送表单

时间:2014-12-20 00:06:47

标签: jquery dropzone.js

我使用Zend Framework 2并实现了Dropzone.js。我仍然是Dropzone的新手,现在遇到了以下问题。我将我的文件与其余的表单字段一起发送。使用PHP我检查表单是否有效,如果不是,我返回错误消息并通过jQuery将其附加到表单。一切正常,但不幸的是,在我现在填写所有表单字段后,我再也无法点击提交按钮了。我怎样才能做到这一点?这听起来像是一个正常的过程,但我必须做一些非常错误的事情。谁能给我一个提示?

  Dropzone.options.myDropzone = {
      autoProcessQueue: false,
      uploadMultiple: true,
      parallelUploads: 100,
      maxFiles: 1,
      maxFilesize: 10, //mb
      acceptedFiles: 'image/*',
      addRemoveLinks: true,
      autoDiscover: false,
      previewsContainer: '.dropzone-previews', //used for specifying the previews div
      clickable: '.dz-clickable', //used this but now i cannot click on previews div to showup the file select dialog box

      accept: function(file, done) {
                console.log("uploaded");
                done();
            },

      // The setting up of the dropzone
      init: function() {
            var myDropzone = this;


            $('#myDropzone').on("submit", function(e) {
              if(myDropzone.files.length > 0) {
                 e.preventDefault();
                 e.stopPropagation();
                 myDropzone.processQueue();
              }
            });         

            myDropzone.processQueue(); // this will submit your form to the specified action path

            // after this, your whole form will get submitted with all the inputs + your files and the php code will remain as usual 
            // REMEMBER you DON'T have to call ajax or anything by yourself, dropzone will take care of that
            // First change the button to actually tell Dropzone to process the queue.


            this.on("maxfilesexceeded", function(file){
                    alert("You have exceeded the maximum files allowed !");
                    this.removeFile(file);
                });      

            // 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) {

               if (response.status == true)
               {
                  window.location.replace(response.redirect);
               }else{   
                  $.each(response.error, function(key, value){
                    $('[name="'+key+'"]').parent().append(getErrorHtml(response[key], value));
                 });
               }
            });

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

    };

 function getErrorHtml(key , value)
 {
   var html = '<ul id="errors-'+key+'" class="errors">';
       html += '<li>' + value + '</li>';
       html += '</ul>';
   return html;

}

0 个答案:

没有答案