Dropzonejs 带有文件预览的多个区域

Question

希望有人能告诉我我哪里出错了。

我使用 Dropzonejs 允许人们将文件拖放到在线存储，我在一个页面上有 8 个区域，每个区域用于不同的类别，当有人拖放文件时，它们会保存有附加数据，具体取决于它们被拖放到的区域供以后检索..这一切都很好。

然后，我希望每个区域在页面刷新时在其类别下显示服务器上每个文件的缩略图，这是我遇到问题的地方，使用以下代码，我的所有文件都显示在底部区域中，其他都是空的。显然，获取当前文件并制作缩略图的代码存在问题，但我不知道为什么。

如果我在页面上只有一个实例，则一切正常。

这是我用来设置和实例化每个 dropzone 实例的代码。

Dropzone.options.dzdiag = {
    url: "upload.php",
    previewsContainer: "#dzdiag",
    init: function() {
        thisDropzone = this;
        filetype = "diagnostic";
        var propid = <?php echo $id; ?>; // set value to current property id
        $.get('upload.php?propid='+propid+'&filetype='+filetype, function(data) { // get exisitng files and thumbnail
            $.each(data, function(key,value){
                var mockFile = { name: value.name, size: value.size, fileid: value.fileid,  };
                thisDropzone.options.addedfile.call(thisDropzone, mockFile);
                var pattern = /\.(gif|jpg|jpeg|tiff|png)$/i;
                if( pattern.test(value.name)){
                    thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploads/"+value.name);
                }
            });
        });             

        thisDropzone.on("sending", function(file, xhr, formData) {
            formData.append("propid", propid);
            formData.append("filetype", filetype);
        });

        thisDropzone.on("success", function(file, serverack) { 
            file.fileid = serverack;
        });

        thisDropzone.on("removedfile", function(file) {
            var delid = file.fileid;  
            $.post('upload.php?delid='+delid);
        }); 

    }
};
$("#dzdiag").dropzone();

Answer 1

只需更改每个区域的 previewsContainer（不指定它）即可满足您的需求。