从Dropzone中的服务器加载的文件显示在队列中

Question

我已经关注this FAQ以及有关在dropzone中显示已存在于服务器上的文件的各种其他SO问题。

我在显示处于“已完成”状态的文件时遇到问题，即隐藏启动/取消上传按钮，显示删除按钮。

根据FAQ，这条线应该照顾它：

// Make sure that there is no progress bar, etc...
myDropzone.emit("complete", mockFile);

不幸的是，这些文件仍然显示为刚刚添加到上传队列中。

有人能指出我正确的方向吗？

    var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
    url: "/upload/", // Set the url
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    autoQueue: false, // Make sure the files aren't queued until manually added
    previewsContainer: "#previews", // Define the container to display the previews
    clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
    init: function () {
        var myDropzone = this;

        var thumbnailUrls = [
            {name: 'myimage1.jpg', size: 312, type: 'image/jpeg', url: 'skdfjlk'},
            {name: 'another2.png', size: 0928, type: 'image/png', url: 'aeserre'}
        ];

        //Populate any existing thumbnails
        if (thumbnailUrls) {
            for (var i = 0; i < thumbnailUrls.length; i++) {
                var mockFile = {
                    name: thumbnailUrls[i].name,
                    size: thumbnailUrls[i].size,
                    type: thumbnailUrls[i].type,
                    status: Dropzone.ADDED,
                    url: thumbnailUrls[i].url
                };

                // Call the default addedfile event handler
                myDropzone.emit("addedfile", mockFile);

                // And optionally show the thumbnail of the file:
                myDropzone.emit("thumbnail", mockFile, thumbnailUrls[i]);

                myDropzone.emit("complete", mockFile);

                myDropzone.files.push(mockFile);
            }
        }
    }
});

Answer 1

问题是，您正在使用的引导程序配置仅在成功时隐藏“开始”和“取消”按钮。 你必须有办法解决这个问题：

1. 更改CSS以隐藏/显示相应的按钮，具体取决于.dz-complete而不是.dz-success类（以下代码）
2. 除success事件外，还会发出complete个事件（您可以尝试此操作，只需在浏览器中执行此操作：myDropzone.emit('success', myDropzone.files[0]);

这将是更新的CSS：

/* Hide the start and cancel buttons and show the delete button */
#previews .file-row.dz-complete .start,
#previews .file-row.dz-complete .cancel {
  display: none;
}
#previews .file-row.dz-complete .delete {
  display: block;
}