2016-02-29 46 views
2

所以我有一个Dropzone的表单,再加上另一个textarea,我想提交 - 如果我插入超大文件或太多,我会在预览中看到“超大”的错误容器等,但表单继续处理按钮单击表单提交(由于我的听众)。我如何才能提交,如果文件大小是正确的两个文件,并没有超过最大文件限制?我不能看到说“没有错误”添加一个click事件侦听一个悬浮窗事件 - 我想我接近,但现在半卡住了,我有以下:Dropzone,如果错误存在,如何不处理队列

$(function() { 

var minImageWidth = 300, minImageHeight = 300; 

Dropzone.options.jobApplicationUpload = { 
    autoProcessQueue: false, 
    addRemoveLinks: true, 
    uploadMultiple: true, 
    paramName: 'file', 
    previewsContainer: '.dropzone-previews', 
    acceptedFiles: '.pdf, .doc, .docx', 
    maxFiles: 2, 
    maxFilesize: 2, // MB 
    dictDefaultMessage: '', 
    clickable: '.fileinput-button', 

    accept: function(file, done) {    

     done(); 
    }, 

    // 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. 
      if(myDropzone.files.length > 0) { 

       $('#job-application-container').hide(); 
       $('#spinner-modal').modal('show'); 
       $('#spinner-modal p').html('<b>Sending your application,</b> please wait...</p>'); 

       e.preventDefault(); 
       e.stopPropagation(); 
       myDropzone.processQueue(); 
      } 

     }); 

     this.on("success", function(files, response) { 


     // Gets triggered when the files have successfully been sent. 
     // Redirect user or notify of success. 

      $('#job-application-container').hide(); 
      console.log('okay' + response); 
      localStorage['success'] = 'test'; 
      location.reload(); 

     }); 



    } 

}; 

});

回答

2

如果你想验证dropzone错误,你可以检查它包含的被拒绝的文件。

一个简单的例子(有限制为只有一个文件,MAXFILESIZE为1MB,并使用版本4.3.0):

var myDropzone = new Dropzone("div#myDropzone", { 
    url: "toLoadUrl", 
    autoProcessQueue: false, 
    uploadMultiple: false, 
    maxFiles: 1, 
    maxFilesize: 1, 
    init: function() { 
     this.on("addedfile", function() { 
      if (this.files[1]!=null){ 
       this.removeFile(this.files[0]); 
      } 
     }); 
    } 
}); 
$('#toServerButton').on('click',function(e){ 
    e.preventDefault(); 
    if (myDropzone.files.length == 0){ 
     alert("You should be select any file"); 
    } else if(myDropzone.getRejectedFiles().length > 0) { 
     alert("The attached file is invalid"); 
    } else { 
     myDropzone.processQueue(); 
    } 
}); 

我希望这是对你有用。

Regards,Yecid