dropzone:当没有选择文件时,提交按钮不起作用

时间:2016-08-09 16:00:10

标签: javascript dropzone.js

我有一个dropzone表单来上传文件,包含在带有2个输入文本的标准表单中,提交按钮(id = submit-all)的行为由以下javascript部分管理(为了上传所有单击按钮后的文件):

Dropzone.options.myDropzone = {
  // Prevents Dropzone from uploading dropped files immediately
  autoProcessQueue: false,
  uploadMultiple: true,
  init: function() {
    var submitButton = document.querySelector("#submit-all")
        myDropzone = this; // closure
    submitButton.addEventListener("click", function() {
      myDropzone.processQueue(); // Tell Dropzone to process all queued files.
    });
    this.on("queuecomplete", function (file) {
      if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
        location.href = 'write.php?final=y';
     }
    });
  }
}; 

单击该按钮时,将按预期上传和处理所有文件,然后将访问者重定向到页面" write.php?final = y' (恭喜留言)。 但是,当没有选择文件时,此脚本不起作用:单击该按钮完全没有效果。

有人可以帮我解决这个问题吗? 非常感谢您的回复!!

1 个答案:

答案 0 :(得分:2)

未发出queuecomplete,因为没有文件

Dropzone.options.myDropzone = {
  // Prevents Dropzone from uploading dropped files immediately
  autoProcessQueue: false,
  uploadMultiple: true,
  init: function() {
    var submitButton = document.querySelector("#submit-all");
    myDropzone = this; // closure
    submitButton.addEventListener("click", function() {
        if (myDropzone.getUploadingFiles().length === 0 && myDropzone.getQueuedFiles().length === 0) {
            location.href = 'write.php?final=y';
        }
        else {
            myDropzone.processQueue();
        }
    });
  }
};

还有一种手动发射事件的方法,只需简单使用

this.emit("signalname");

和事件列表

Dropzone.prototype.events = ["drop", "dragstart", "dragend", "dragenter", "dragover", "dragleave", "addedfile", "addedfiles", "removedfile", "thumbnail", "error", "errormultiple", "processing", "processingmultiple", "uploadprogress", "totaluploadprogress", "sending", "sendingmultiple", "success", "successmultiple", "canceled", "canceledmultiple", "complete", "completemultiple", "reset", "maxfilesexceeded", "maxfilesreached", "queuecomplete"];