$("body").on("drop")和Dropzone.js

Question

我有一个很好的落点区。我也有一些元素作为额外的“目标”，用户可以在其中删除文件。

问题是，我不知道如何将删除的文件从目标元素“转发”到下拉区域进行上传。与生成多个下拉区域相比，我更喜欢下面的代码示例，因为在这个场景中，考虑到未来目标拖放元素的数量可能是10或15+，这感觉非常麻烦。

"drop": function(e) {

    e.preventDefault();

    myDropzone.upload(e.originalEvent.dataTransfer); // Any way to do something like this?

}

Answer 1

通过访问Dropzone.instances并获取所需的实例，您可以很容易地做到这一点。如果你只有一个，那就抓住Dropzone.instances[0]。如果您有多个元素，那么您可以找到一个元素，该元素具有正确的id。一旦获得了该引用，就可以从自定义区域的drop事件中调用dataTransfer对象并沿着drop对象转发。

drop事件处理程序的代码如下所示：

function (e) {
  // make sure to avoid default browser handling (opens file in a new tab/window)
  e.preventDefault();

  if (e.dataTransfer && e.dataTransfer.files.length) {
    // you could pass along the entire event, but probably best to just pass what you need
    Dropzone.instances[0].drop({ dataTransfer: e.dataTransfer });
  }
}

这是一个沙箱给出了一个工作示例。它实际上并不会将文件上传到服务器，但您将看到它们按预期的方式添加到下拉区域。