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

Question

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

我无法显示处于 "completed" 状态的文件，即隐藏 start/cancel 上传按钮，显示删除按钮。

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

// 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

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

根据 .dz-complete 而不是 .dz-success class （下面的代码）
除了 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;
}

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

Files loaded from server in Dropzone are shown in the queue

javascript

dropzone.js