如何从单独的函数调用Dropzone Processqueue()

Question

我的表单包括dropzone.js，并通过jQuery插件formValidation.io。

进行验证。

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

我试图通过

来做到这一点

• 使用autoProcessQueue: false配置配置Dropzone，以防止文件自动上传
  • 从表单验证onsuccess callback
  手动调用dropzone processQueue()

所有尝试都失败了。看来，借助我有限的JavaScript知识，我无法从另一个功能中访问Dropzone？

我确信答案是关于Dropzone问题的评论 jQuery Intancing：访问Dropzone对象＃180 ，但我不知道如何实现此处讨论的内容。https://github.com/enyo/dropzone/issues/180

代码下面的评论显示了我尝试调用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脚本 - 下面的代码包括注释，显示我的尝试调用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();
    */
    });

});

Answer 1

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

应该是autoQueue: true,。

应该已经意识到了这一点，但已从https://www.dropzonejs.com/bootstrap.html 确的表单验证回调为

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

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