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（不指定它）就可以获得您想要的效果。

Dropzonejs mulitple区域，带有文件预览

1 个答案: