Question

我正在使用Dropzonejs在表单中添加图片上传功能，因为我在表单中有各种其他字段，所以我已将autoProcessQueue设置为false并在点击提交时处理它表格按钮如下所示。

Dropzone.options.portfolioForm = { 

    url: "/user/portfolio/save",
    previewsContainer: ".dropzone-previews",
    uploadMultiple: true,
    parallelUploads: 8,
    autoProcessQueue: false,
    autoDiscover: false,
    addRemoveLinks: true,
    maxFiles: 8,

    init: function() {

         var myDropzone = this;
         this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {

             e.preventDefault();
             e.stopPropagation();
             myDropzone.processQueue();
         });
     }
 }

此工作正常，允许我处理提交表单时发送的所有图像。但是，我还希望能够在用户再次编辑表单时看到用户已上传的图像。所以我通过Dropzone Wiki发表了以下帖子。 https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

使用现有图像填充dropzone-preview区域，但此次不会发送带有表单提交的现有图像。我想这是因为这些图片没有添加到queue中，但如果是，那么如何在服务器端更新，以防用户删除现有图片？

此外，什么是更好的方法，再次在queue添加已添加的图像或只是发送已删除文件的信息？

Answer 1

我花了一些时间再次尝试添加图片，但在与它争吵一段时间之后，我最终只是将有关已删除图像的信息发送回服务器。

当使用现有图像填充dropzone时，我将图像的url附加到mockFile对象。在removedfile事件中，如果要删除的文件是预填充图像（通过测试传递给事件的文件是否具有url属性来确定），则向表单添加隐藏输入。我在下面列出了相关代码：

Dropzone.options.imageDropzone = {
    paramName: 'NewImages',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    init: function () {
        var myDropzone = this;

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

                // 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.files.push(mockFile);
            }
        }

        this.on("removedfile", function (file) {
            // Only files that have been programmatically added should
            // have a url property.
            if (file.url && file.url.trim().length > 0) {
                $("<input type='hidden'>").attr({
                    id: 'DeletedImageUrls',
                    name: 'DeletedImageUrls'
                }).val(file.url).appendTo('#image-form');
            }
        });
    }
});

服务器代码（asp mvc controller）：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(ViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        foreach (var url in viewModel.DeletedImageUrls)
        {
            // Code to remove the image
        }

        foreach (var image in viewModel.NewImages)
        {
            // Code to add the image
        }
    }
}

我希望有所帮助。

Answer 2

为了扩展Teppic的答案，我发现你需要发出完整的事件来删除预览中的进度条。

var file = {
    name: value.name,
    size: value.size,
    status: Dropzone.ADDED,
    accepted: true
};
myDropzone.emit("addedfile", file);                                
myDropzone.emit("thumbnail", file, value.path);
myDropzone.emit("complete", file);
myDropzone.files.push(file);

Answer 3

只需使用myDropzone.addFile(file)

来自dropzone源代码https://github.com/enyo/dropzone/blob/4e20bd4c508179997b4b172eb66e927f9c0c8564/dist/dropzone.js#L978

的

Answer 4

最初我这样做是为了以编程方式上传预先存在的文件：

myDropzone.emit("addedfile", imageFile);                                
myDropzone.emit("thumbnail", imageFile, imageUrl);
myDropzone.files.push(file);

但是，引用此Dropzone Github Issue我发现了一种更简单的直接上传方式：

myDropzone.uploadFiles([imageFile])

不幸的是Dropzone Documentation中没有对 uploadFiles 方法的引用，所以我想我会与所有Dropzone用户分享一些知识。

希望这有助于某人

Answer 5

我使用dropzone内置的“ displayExistingFile”方法解决了此问题。

init：函数中。

创建模拟文件

let mockFile = {名称：file.title，大小：file.size，dataURL：};
调用displayExistingFile函数

this.displayExistingFile（mockFile，，null，'anonymous'）

您可以放置一个回调来响应缩略图加载事件，而不是'null'。

“ anonymous”用于跨源属性。

Answer 6

点击上传文件后，只需清除dropzone中的文件即可。可以使用removeAllFiles（）或特定文件清除所有文件，也可以使用removeFile（fileName）删除。

Answer 7

有关该here

的官方常见问题解答

在Dropzone中添加现有图像文件

7 个答案: