Question

点击添加按钮后，我只想要多个下拉区域。可能吗？怎么样？

我试过这个。但是没有工作

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

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

我的dropzone选项。

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 documentation创建一个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实例提供unique id，或者使用不同的选择器选择每个新的dropzone实例。

动态点击附加多个Dropzone

1 个答案: