如何从单独的函数调用 dropzone processQueue()？答案

【问题标题】：How to call dropzone processQueue() from separate function?如何从单独的函数调用 dropzone processQueue()？
【发布时间】：2019-10-05 17:06:09
【问题描述】：

我的表单包含 dropzone.js，并通过 jQuery 插件 formvalidation.io 进行了验证。

文件上传和验证元素按预期独立工作，但是我需要在 Dropzone 上传任何文件之前运行表单验证。

我正在尝试这样做

使用autoProcessQueue: false配置配置Dropzone以防止文件自动上传
- 从表单验证 onSuccess 回调手动调用 Dropzone processQueue()

所有尝试都失败了。看来，以我有限的 javascript 知识，我无法从另一个函数中访问 Dropzone？

我确信答案在 Dropzone 问题的 cmets 中 jQuery instancing: Accessing Dropzone object #180 但我不知道如何实现这里讨论的内容。 https://github.com/enyo/dropzone/issues/180

下面的代码有 cmets 显示我尝试调用 processQueue() 以及每个结果的结果。

谁能告诉我如何正确拨打processQueue()？

Dropzone 脚本

Dropzone.autoDiscover = false;

// Get the template HTML and remove it from the document
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);

var myDropzone = new Dropzone('#drop-target', { // define specific dropzone target
  url: "/processors/form-upload-files.html", // Set the url
  previewTemplate: previewTemplate,
  autoQueue: false, // Make sure the files aren't queued until manually enqueued
  previewsContainer: "#previews", // Define the container to display the previews
  clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.

  autoProcessQueue: false, // when ready to send files call myDropzone.processQueue()
  uploadMultiple: true,

  init: function() {

    // removed for ease of reading as not relevant to the problem

  } 

});

Formvalidation 脚本 - 下面的代码包括 cmets，显示我尝试调用 processQueue() 以及每个结果的结果

$(function() {
  FormValidation.formValidation(
      document.getElementById('fm-contact'), {
        fields: {
          user_name: {
            validators: {
              notEmpty: {
                message: 'What should we call you?'
              }
            }
          } /* other validators removed for ease of reading */
            }
          }

        },
      }
    )

    /* form is valid, trigger dropzone processQueue() */
    .on('core.form.valid', function() {

      // call dropzone to upload files and data

      // figure if files are queued
    // console.log( myDropzone.getQueuedFiles() ) // returns empty array

    /* console log is empty
    var myDropzone = Dropzone.forElement("#drop-target");
    console.log( myDropzone ) 
    myDropzone.processQueue();
    */

    /* does not process queue, no errors
    $('#drop-target')[0].dropzone.processQueue();
    */

    /* Error: Dropzone already attached. - even with Dropzone.autoDiscover = false; outside of jquery ready function 
    var dropzone1 = new Dropzone("#drop-target", { autoProcessQueue: false, uploadMultiple: true});
    dropzone1.processQueue();
    */

    /* TypeError: dropzone is undefined
    var dropzone = $(this).get(0).dropzone;
    dropzone.processQueue();
    */

    /* does not process queue, no errors
    var dzone = document.querySelector("#drop-target").dropzone;
    dzone.processQueue();
    */


    /* does not process queue, no errors
    Dropzone.forElement("#drop-target").processQueue();
    */

    /* does not process queue, no errors
    var myDropzone = Dropzone.forElement("div#drop-target");
    myDropzone.processQueue();
    */


    /* ReferenceError: options is not defined 
    var drop = $("#drop-target").dropzone({ autoProcessQueue: false, uploadMultiple: true}).get(0).dropzone;
    drop.processQueue();
    */

    /* does not process queue, no errors
    $('#drop-target').get(0).dropzone.processQueue();
    */

    });


});

【问题讨论】：

标签： jquery dropzone.js formvalidation.io

【解决方案1】：

通过正确配置 Dropzone 解决了问题。 autoQueue: false,表示调用processQueue();时队列为空。

应该是autoQueue: true,。

应该已经意识到这一点，但是从 Dropzone 文档中的示例中复制了配置 - 第二个要点的第 13 行 https://www.dropzonejs.com/bootstrap.html

正确的表单验证回调是

.on('core.form.valid', function() {
    var myDropzone = Dropzone.forElement("#drop-target");
});

感谢 63 Digital 的 Alastair 指出我的愚蠢。

【讨论】：