Dropzone 两次打开文件选择器答案

【问题标题】：Dropzone opens file chooser twiceDropzone 两次打开文件选择器
【发布时间】：2014-11-26 15:43:15
【问题描述】：

我已经设置了带有可点击元素的 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 选项以进行良好的测量。

谁能看出我的错误？

【问题讨论】：

标签： dropzone.js

【解决方案1】：

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

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

用非 jquery 方式解决问题：

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

这是在 dropzone 3.11.1 上。

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

【讨论】：

您也可以通过程序创建dropzone，但您必须通过Dropzone.autoDiscover = false;关闭autoDiscover功能；
不幸的是这个解决方案对我不起作用，它仍然显示文件上传提示两次。
如果它不适合你（对我来说） - 注意标签标签。见：stackoverflow.com/a/52227434/1020541

【解决方案2】：

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

【讨论】：

你是救生员！

【解决方案3】：

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

当您的可点击元素已经是输入[类型=文件]。 Dropzone 注入另一个，现在你有两个。

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

将我的 dropzone 元素更改为 input[type=file] 以外的其他内容为我解决了这个问题。

【讨论】：

【解决方案4】：

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

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

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

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

代码：

$('input').dropzone();

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

如果将其附加到父级：

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

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

【讨论】：