javascript - 在点击时动态添加多个 Dropzone

Question

只有在单击添加按钮后，我才想要多个放置区。可能吗？那怎么办？

我试过这个。但不工作

$(".image_upload .add_new").click(function(){

    $(".image_upload").append('<form action="/upload-target" class="dropzone" id="singledropzone"></form>');
});

我的拖放区选项。

Dropzone.options.singledropzone = {
    maxFilesize: 0.5,
    dictDefaultMessage: "UPLOAD IMAGE",
    maxFiles: 1,
    clickable: true,
    thumbnailWidth: 140,
    thumbnailHeight: 140,
    maxThumbnailFilesize: 0.5,
    init: function() {
    this.on("maxfilesexceeded", function(file) {
        this.removeAllFiles();
        this.addFile(file);
    });
    }
}

Answer 1

加载页面后，您需要手动创建一个 dropzone 对象，这可以通过创建 dropzone 类的实例来完成，来自dropzone 文档。

js：

$(".image_upload .add_new").click(function(){

    $(".image_upload").append('<form action="/upload-target" class="dropzone" id="singledropzone"></form>');

    let singleDropzoneOptions = {
        maxFilesize: 0.5,
        dictDefaultMessage: "UPLOAD IMAGE",
        maxFiles: 1,
        clickable: true,
        thumbnailWidth: 140,
        thumbnailHeight: 140,
        maxThumbnailFilesize: 0.5,
        init: function() {
            this.on("maxfilesexceeded", function(file) {
                this.removeAllFiles();
                this.addFile(file);
            });
        }
    }

    $("form#singledropzone").dropzone(singleDropzoneOptions);

});

请注意，如果您计划使用此方法添加多个 dropzone 实例，您应该找到一种方法为每个新的 dropzone 实例提供一个唯一的 id，或者使用不同的选择器选择每个新的 dropzone 实例。