在Dropzone中添加现有图像文件

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控制器):

[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);