为什么 dropzone js 以编程方式无法正常工作？答案

【问题标题】：why dropzonejs programatically does not work fine?为什么 dropzone js 以编程方式无法正常工作？
【发布时间】：2015-11-14 15:40:29
【问题描述】：

我正在开发一个网络应用程序。对于文件上传，我想使用dropzonejs 以编程方式，但效果不佳。您可以在jsfiddle.nethere 上查看示例。

var myDropzone = new Dropzone("div#myDropZone", { url: "upload.php"});

【问题讨论】：

标签： javascript image-uploading dropzone.js

【解决方案1】：

您需要将autoDiscover 功能设置为false，否则dropzone 将使用默认选项加载并抛出错误dropzone already attached，并且由于您使用的是div，因此默认初始化也不起作用，因为需要url .

html:

<body onload="me()">
   <h1>Drag&amp;Drop Multiple Files Upload using DropzoneJS</h1>
   <div class="image_upload_div">
      <div id="myDropZone" class="dropzone" ></div>     
   </div>
</body>

js:

Dropzone.autoDiscover = false;
var me = function () {
    var myDropzone = new Dropzone("div#myDropZone", {
        url: "upload.php"
    });
}

Fiddle

【讨论】：

非常感谢。
为我做的诀窍是，从文档中并不清楚，你仍然需要在你的元素中保留 dropzone 类，否则它不起作用。不知道为什么需要这样做：如果我在一个元素中调用 Dropzone，它应该是一个 dropzone，句号，无论它是否属于 dropzone 类。我这样做是为了避免必须执行 Dropzone.autodiscover = false;，但显然我的解决方法不起作用。
我刚刚发现：你的小提琴只是在工作，因为在头部加载脚本的副作用（小提琴的作用）：因为当 dropzone.js 被加载和执行时，身体是尚不存在，没有要附加的 dropzone 元素，然后您可以手动创建您的 dropzone。正确的方法是告诉 Dropzone 在加载后根本不要附加，但你不能这样做，因为 Dropzone 没有加载并且你不能设置Dropzone.autoDiscover = false;，或者 Dropzone 已经加载并且已经太晚了：它有随附的。头部解决方案是一种黑客攻击。
@gonvaled 我不是页面加载方式的专家，但我会尝试解释这个过程，或者至少我认为这个过程是如何工作的。即使 dropzone 库包含在头部并在 DOM 准备好之前加载，顺便说一句，我认为这是一件常见的事情，它会等待尝试附加到元素直到触发 DOMContentLoaded 事件，这是个人的，但是我倾向于在最后将我的脚本包含在正文中，因此在触发 DOMContentLoaded 之前加载脚本，因此当 dropzone 库检查它时，Dropzone.atuoDiscover 设置为 false。