Question

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

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

我正在尝试通过

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

所有尝试均失败。似乎，由于我对JavaScript的了解有限，我无法从另一个函数中访问Dropzone？

我确定答案是在Dropzone问题 jQuery实例化：访问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,。

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

正确的表单验证回调为

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

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

如何从单独的函数调用dropzone processQueue（）？

1 个答案: