使用 jQuery 以编程方式创建 dropzone 实例不起作用？答案

【问题标题】：Programmatically create dropzone instance with jQuery not working?使用 jQuery 以编程方式创建 dropzone 实例不起作用？
【发布时间】：2014-08-08 22:42:52
【问题描述】：

我在让 Dropzone 与 jQuery 一起工作时遇到了一点问题。我想知道是否有人可以提供帮助。

我已经尝试了 jQuery 版本 1.11.1 和 2.1.1，但似乎都不起作用。我已经让它与简单的 Javascript 一起工作，但是，我计划做一些主要的脚本，并希望 dropzone 与 jQuery 一起工作，以保存一些变量，以免被创建以传输数据。

Dropzone 文档提到了一个 jQuery 插件。但是，我在源代码的任何地方都找不到它，这里只提到了它： http://www.dropzonejs.com/#toc_4 没有关于它实际在哪里的信息。

我计划使用带有div 而不是form 的Dropzone，并且不涉及服务器代码。这是一个静态的一次性网页。目前我只是关注文档。

这是我的一些代码：

HTML

    <link href="css/dropzone.css" type="text/css" rel="stylesheet" />
    <script src="dropzone.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    </script>
</head>

<body>
    <div id="dropthat" class="dropzone"></div>
    <script src="script.js"></script>

jQuery

$(document).ready(function() {
    $("div#dropthat").dropzone({ url: "/file/post" });
    //Below is my older, working Javascript code, still here for comparison.
    //var myDropzone = new Dropzone("div#dropthat", { url: "/file/post" });
});

我确定我要么错过了一些非常小的东西，要么确实是缺少 jQuery 插件文件的问题。有人知道 jQuery 插件文件及其名称吗？我已经在 dropzone 的源文件中搜索了 jQuery，但找不到任何东西。似乎 Dropzone 最初是作为 jQuery 插件制作的，并且最近才成为独立的。或者可能是我的 jQuery 版本。

如果最坏的情况发生，我总是可以使用 JavaScript 事件侦听器而不是 jQuery 来获取变量。

【问题讨论】：

你想达到什么目的？为什么要使用 div 而不是表单？您可以复制并粘贴演示代码并禁用使用 jQuery 触发表单。
我想我很不理智。编辑：不是这么快就发布这个所以继续：我正在为自己制作一个小应用程序，它可以拍摄我拖放到网页中的图像，并将使用标记等。我不需要将它保存到一个数据库。老实说，我可以通过许多更简单的方式来做到这一点。我的目标是使用事件侦听器在文件被删除时抓取并使用它。我只是认为 jQuery 会更容易一些，这个问题似乎很小，让我很恼火。

标签： javascript jquery html dropzone.js

【解决方案1】：

我不完全确定您要的是什么，但如果您想了解您的库和 JQuery 之间的关系，只需查看源代码：

if (typeof jQuery !== "undefined" && jQuery !== null) {
    jQuery.fn.dropzone = function(options) {
      return this.each(function() {
        return new Dropzone(this, options);
      });
    };
  }

首先它会检查 jQuery 是否已经加载到您的页面上，如果已经加载，那么它会将自身附加为插件，这意味着：为了使用 jQuery 插件，您需要确保您的 jQuery 库脚本在 Dropzone 之前运行。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="dropzone.js"></script>

注意事项：
- 我查看了 here
的 INSTALLATION 部分中提供的源代码 - Git wiki（也许在开发过程中会对你有所帮助）

【讨论】：

我一定很累，错过了这个，你甚至为我翻阅了源代码。我非常感谢你:)