在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對象。在去除文件事件中，如果要刪除的文件是預先填充的圖像（通過測試傳入該事件的文件是否具有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'); 
      } 
     }); 
    } 
}); 

Server代碼（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

點擊上傳文件只需清除dropzone中的文件。 所有文件都可以使用removeAllFiles（）或特定的文件清除，也可以使用removeFile（fileName）進行刪除。

Answer 3

爲了擴展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 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

只使用myDropzone.addFile(file)

從懸浮窗源代碼https://github.com/enyo/dropzone/blob/4e20bd4c508179997b4b172eb66e927f9c0c8564/dist/dropzone.js#L978