设置上传图像的数量限制时，dropzone.js如何考虑预加载图像？

Question

加载dropzone.js组件时，我按照如何将图像预加载到dropzone.js中的说明预加载了一组图像。 我的问题是我需要将最大上传数量限制为5张图片，但是dropzone不会计算我预加载的图片，因此我可以上传“更多5张图片”。 如何解决？

Answer 1

这对我有用

var myDropzone = new Dropzone("#div",{
    addRemoveLinks: true,
    maxFiles: 5,
    init: function() {
        var thisDropzone = this;
        $.getJSON('/upload', function(data) { // get the json response
            $.each(data, function(key,value){ //loop through it
                var mockFile = { name: value.name, size: value.size };
                thisDropzone.options.addedfile.call(thisDropzone, mockFile);
                thisDropzone.options.thumbnail.call(thisDropzone, mockFile, value.url);
                thisDropzone.files.push(mockFile)       
            });
        });
    }
 });
myDropzone.on("maxfilesexceeded", function(file) {
  this.removeFile(file);
})


myDropzone.on("addedfile", function(file) {
    if(this.files.length > 5){
        for(var i=maxScreenshots;i<=this.files.length;i++)
            this.removeFile( this.files[i] )    
            alert("Maximum 5 Screenshot can be added")
            return;
    }
});

Answer 2

我有很长一段时间都遇到过同样的问题，在研究了插件之后，我找到了一种解决问题的方法。 尝试预加载现有图像时，必须向模拟对象添加一个名为“ accepted：true”的键，如下所示：

var mockFile = { name: value.name, size: value.size, accepted: true };

发生这种情况的原因是因为this.getAcceptedFiles（）方法检查文件对象上的接受键。 如果您预加载图像，则必须将该图像作为对象的一部分包括在内，以便插件知道图像被接受并且是图像总数的一部分。

我希望它对你们所有人都有效！

让我知道它是否破坏了其他地方...

Answer 3

您需要将maxFiles设置为5。进一步搜索网络，发现一旦maxFiles达到规定的文件数，现在将dz-max-files-reached类添加到main元素中。 有了这项新功能，您现在可以在类存在的情况下执行操作。 这是更改项https://github.com/enyo/dropzone/issues/28