使用 jQuery 获取 Dropzone 实例/对象答案

【问题标题】：Get Dropzone Instance/Object using jQuery使用 jQuery 获取 Dropzone 实例/对象
【发布时间】：2015-06-13 14:27:01
【问题描述】：

我使用 jQuery 来处理 dropzone。例如

$("#mydropzone").dropzone({ /*options*/ });

我需要获取 Dropzone 实例，以便调用此方法：

myDropzone.processQueue()

我怎样才能做到这一点？有可能吗？

换句话说，如何使用

初始化放置区

$("#mydropzone").dropzone({ url: "/file/post" });

但同时获取对象的实例，就像我使用它初始化它一样：

var myDropzone = new Dropzone("#mydropzone", { url: "/file/post"});

所以我可以打电话：

myDropzone.processQueue()

非常感谢。

【问题讨论】：

你可以在 dropzone 源码中看到 jquery 部分： if (typeof jQuery !== "undefined" && jQuery !== null) { jQuery.fn.dropzone = function(options) { return this. each(function() { return new Dropzone(this, options); }); }; jQuery 是为简单的链接脚本而构建的，而不是你想要的，但 dropzone 可能会将创建对象（原型）存储到给定的元素上。只需 console.dir("your element") 并检查 dropzone 的列表...代码太大，手动检查...

标签： javascript jquery dropzone.js

【解决方案1】：

如issue #180中所述

你也可以使用内置的Dropzone.forElement函数。

var myDropzone = Dropzone.forElement("#mydropzone");

【讨论】：

这是正确的答案，但需要一个额外的步骤，因为事实上，结果是一个 jQuery 对象而不是 Dropzone 对象，所以除非你使用它，否则你真的不能用它做任何事情喜欢var myDropzone = Dropzone.forElement("#mydropzone").get(0);
花了一天时间，终于找到了可行的答案

【解决方案2】：

脚本似乎将dropzone 对象添加到给定的element。所以你可以做这样的事情：

var $dropZone = $("#mydropzone").dropzone({ /*options*/ });
// ...
$dropZone[0].dropzone.processQueue();

【讨论】：

你能创建一个 jsfiddle 吗？更容易帮助您（或任何其他可访问的 URL）
好的，依赖似乎没有加载，我将 dropzone.js 直接添加到小提琴中（所以向下滚动查看代码）。我确认 dropzone 将“dropzone”对象添加到元素，您可以在其中调用 processQueue() 我添加了一个 console.log() 附加到元素的 dropzone 对象。 jsfiddle.net/zbqk7a7z/3
你是对的......我做错了......例如//console.log(mydrop.dropzone()); //错误的方式 //console.log(mydrop.dropzone); //错误的方式....非常感谢您
如果一切正常，则标记为完成；)

【解决方案3】：

使用 jQuery 访问实例的简单方法，如果它已经被初始化：

var dropzone = $(this).get(0).dropzone;

【讨论】：

【解决方案4】：

如前所述，您可以使用 dropzone 的forElement，它反过来只检查element.dropzone，其中“元素”是本机元素（不是 jquery obj）。因此，要合并、总结、解释和扩展之前的答案，您可以这样做：

var element = $("#mydropzone")[0]; // this is the way jquery gives you the original dom

或者更好，只是简单的 js：

var element = document.querySelector("#mydropzone");

然后像这样获取dropzone：

element.dropzone

或者，更简洁（这里是纯js）：

var dzone = document.querySelector("#mydropzone").dropzone

仅供参考，当前dropzone的forElement来源：

Dropzone.forElement = function (element) {
  if (typeof element === "string") {
    element = document.querySelector(element);
  }
  if ((element != null ? element.dropzone : undefined) == null) {
    throw new Error("No Dropzone found for given element. This is probably because you're trying to access it before Dropzone had the time to initialize. Use the `init` option to setup any additional observers on your Dropzone.");
  }
  return element.dropzone;
};

【讨论】：

【解决方案5】：

使用 Dropzone.instances 检查元素的 id 似乎很简单：

function fn_check_has_dropzone_instances(id){
    var found = false;
    Dropzone.instances.forEach(function(item,index){
        if($($(item)[0].element).attr('id').trim()==id.trim()){
            console.log(id);
            found = true;
        }
    });
    return found;
}

【讨论】：