Question

不是在单个dropzone元素上上传多个文件 - 是否可以在一个页面上有多个dropzone元素？

当有多个元素时，似乎dropzone在选择对话框后甚至没有触发，每个元素都有自己的dropzone初始化

Answer 1

使用dropzone的典型方法是创建一个带有dropzone类的表单元素：

<form action="/file-upload"
      class="dropzone"
      id="my-awesome-dropzone"></form>

就是这样。 Dropzone将找到具有类dropzone的所有表单元素，自动将其自身附加到其上，并将放入其中的文件上载到指定的操作属性。然后，您可以像这样访问dropzone元素：

// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("Naha, you don't.");
    }
    else { done(); }
  }
};

Answer 2

据我所知，您可以创建自己的dropzone，然后可以有多个dropzone元素。

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

// jQuery
$("div#myId").dropzone({ url: "/file/post" });

Answer 3

是的，您在单个页面上可以有无限数量的拖放区。

示例：

<form action="/controller/action">
    <div class="dropzoner" id="dropzone1"></div>
    <div class="dropzoner" id="dropzone2"></div>
</form>

<script>
Dropzone.autoDiscover = false; // Very important

InitializeDropzones();

function InitializeDropzones() { // You only need to encapsulate this in a function if you are going to recall it later after an ajax post.
    Array.prototype.slice.call(document.querySelectorAll('.dropzoner'))
        .forEach(element => {

        if (element.dropzone) {
            element.dropzone.destroy();
        } // This is only necessary if you are going to use ajax to reload dropzones. Without this, you will get a "Dropzone already exists" error.

        var myDropzone = new Dropzone(element, {
            url: "/controller/action",
            headers: {
                "headerproperty": value,
                "headerproperty2": value2
            },
        });
    })
}
</script>

一些注意事项可能会在处理多个放置区时为某人节省时间：

通过ajax重新加载任何附加了dropzone的元素后，您将需要将该dropzone重新初始化到元素上。

例如：

myDropzone.on("success", function (response) {
         toastr[show a toastr];
         $("#ContainerThatHasDropzones").load("/controller/action/" + id, function() {
         Dropzone.discover(); // This is very important. The dropzones will not work without this after reloading via ajax.
         InitializeDropzones();
});

多个dropzone.js - 单页

3 个答案: