dropzone.js - Dropzone 两次打开文件选择器

Question

我已经设置了带有可点击元素的 dropzone。单击该按钮会导致 dropzone 打开文件选择器两次，而不是一次，第二次会在选择第一个文件后立即打开。

初始化代码是:

Dropzone.autoDiscover = false;

$(document).ready(function(){

// Remove the template from the document.
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);

$("div#photo").dropzone({
    url: "/blackhole/",
    thumbnailWidth: 240,
    thumbnailHeight: 240,
    parallelUploads: 1,
    maxFiles:1,
    maxFilesize: 5,
    uploadMultiple: false,
    previewTemplate: previewTemplate,
    autoProcessQueue: true,
    previewsContainer: "#photoPreview", 
    clickable: ".fileinput-button",
    init: function() {
        this.on("maxfilesexceeded", function(file) {
            this.removeAllFiles();
            this.addFile(file);
        });
    }   
});

页面元素是:

      <div class="table table-striped" class="files">

        <div id="photo">
          <div id="actions" class="row">
            <div class="col-lg-7">
              <button type="button" class="btn btn-success fileinput-button">
                <i class="glyphicon glyphicon-plus"></i>
                <span>Choose file...</span>
              </button>
            </div>
          </div>
        </div>

        <div class="files dropzone-previews" id="photoPreview">
          <div id="template" class="file-row">
            <div>
              <span class="preview"><img data-dz-thumbnail /></span>
            </div>
            <div>
              <p class="name" data-dz-name></p>
              <strong class="error text-danger" data-dz-errormessage></strong>
            </div>
            <div>
              <p class="size" data-dz-size></p>
              <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
              </div>
            </div>
            <div>
              <button data-dz-remove type="button" class="btn btn-warning cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
                <span>Cancel</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

奇怪的是，即使我添加了代码来用后一个文件替换任何现有文件(因此只能上传一个文件)，第二个文件选择器对话框让我添加第二个文件。

它就像 dropzone 已经初始化了两次，但我检查了它只初始化了一次，并且还添加了 autoDiscover = false 选项以进行良好的衡量。

谁能发现我的错误？

Answer 1

问题似乎在于我们如何初始化 dropzone:

$("div#photo").dropzone({
...
}

用非jquery的方式解决问题:

var myDropZone = new Dropzone("#photo",{
...
}

这是在 dropzone 3.11.1 上。

在 github/dropzone 上创建了一个问题:
https://github.com/enyo/dropzone/issues/771