javascript - 多个 dropzone.js - 单页

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();
});