【问题标题】:dropzone: submit button doesn't work when no file selecteddropzone:未选择文件时,提交按钮不起作用
【发布时间】:2016-12-15 18:45:24
【问题描述】:

我有一个用于上传文件的 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'(恭喜消息)。 但是,当没有选择文件时,此脚本不起作用:单击按钮根本没有效果。

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

【问题讨论】:

  • 为什么要在 dropzone 中没有文件的情况下使用提交按钮?
  • @Martin:因为提交按钮会触发几件事情:当一些被选中的时候上传和处理图片,但也会发送一封确认邮件,最后重定向到另一个页面。
  • @martin:我忘了说这个表单还包括 2 个输入文本标签

标签: javascript dropzone.js


【解决方案1】:

队列完成没有发出,因为没有文件

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"];

【讨论】:

  • 谢谢,但它不起作用:点击提交按钮无论是否选择了某些文件都没有效果。
  • 这对我有用,检查控制台日志,可能是找不到提交所有按钮的问题
  • 我从控制台日志中收到以下消息:“抛出值的异常:TypeError:this.getUploadingFiles 不是函数。(在'this.getUploadingFiles()'中,'this.getUploadingFiles'是未定义)"
  • 效果很好。非常感谢亚当!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-03-25
  • 2013-04-09
  • 1970-01-01
  • 2015-12-01
相关资源
最近更新 更多