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 (不指定它)就可以得到您想要的结果。