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