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

Question

我有一个效果很好的拖放区。我还有一些附加元素 "targets"，用户可以在其中放置文件。

问题是，我不知道如何"forward"将目标元素中的拖放文件上传到拖放区。我更喜欢下面的代码示例，而不是生成多个放置区，因为在这种情况下感觉很糟糕，因为将来目标放置元素的数量可能是 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 并沿着自定义区域的 drop 事件中的 dataTransfer 对象转发。

您的 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 });
  }
}

Here's a sandbox 有一个工作示例。它实际上并没有将文件上传到服务器，但您会看到它们按预期添加到拖放区。

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

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

javascript

jquery

file-upload

dropzone