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

Question

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

我无法以“已完成”状态显示文件，即隐藏开始/取消上传按钮，显示删除按钮。

根据常见问题解答，这行应该处理它：

// 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. 根据 .dz-complete 而不是 .dz-success 类更改 CSS 以隐藏/显示适当的按钮（代码如下）
2. 除了complete 事件之外，还发出一个success 事件（你可以试试这个，只需在浏览器中执行这个：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;
}