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

Answer 2

在为此打开的issue中，maliayas说：

当您的clickable元素已经是一个输入[类型=文件]。 Dropzone会再注入一个，现在有两个。

要么dropzone应该处理这种情况，要么文档应该处理提及不要为可点击元素使用input [type = file]。

将我的dropzone元素更改为input[type=file]之外的其他内容对我来说就是一个问题。

Answer 3

将 dropzone 附加到父级，而不是输入。

在 Chrome 中，如果您检查并查看 eventListeners。您将看到，一旦您将 dropzone 附加到您的输入中，您就有了一个额外的点击事件监听器。

假设您有一个包含子输入元素的文档的上传列表。

<li class="upload drag-and-drop">
    <input type="file"/>
</li>

代码：

$('input').dropzone();

将事件侦听器附加到已可点击的元素。所以你有 2 个事件监听器。一个来自浏览器。一个来自 dropzone。因此有 2 个对话框...

如果您将其附加到父项：

$('li.upload').dropzone();

您现在将拥有父级的侦听器。这允许在您拖放时冒泡行为击中正确的元素，而不会无意中影响输入。

Answer 4

当我在浏览触发器具有相同类别的页面上存在多个dropzone时，会发生这种情况，似乎dropzone将事件附加到页面上的任何元素而不仅仅是在其自己的容器中

Dropzone打开文件选择器两次

4 个答案: