DropZone在init中替換圖像

Question

我用這個代碼在init中從數據庫上傳圖像。現在我想要上傳一張新圖片來刪除這張初始圖片。

var o = $("div#uploader").dropzone({ 
      url: "../../Merchant/UploadLogo", 
      paramName: "logo", 
      maxFiles: 1, 

      //enqueueForUpload: false, 
      maxfilesexceeded: function (file) { 
       this.removeAllFiles(); 
       this.addFile(file); 
      }, 

      addRemoveLinks: true, 
      uploadMultiple: false, 
      dictRemoveFile: "حذف", 

      removedfile: function(file) { 
       RemoveFile("Logo"); 
       var _ref; 
       return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; 
      }, 

      init: function() { 

       var mockFile = { name: "avatar1.jpg", size: 12345, type: 'image/jpeg', url: "../../Merchant/GetLogo" }; 
       this.options.addedfile.call(this, mockFile); 
       this.options.thumbnail.call(this, mockFile, mockFile.url);//uploadsfolder is the folder where you have all those uploaded files 
      } 

     }); 

Answer 1

我假設你想在Dropzone中更換舊圖像，只要新圖像成功上傳。你可以做到這一點通過組合Dropzone提供的this.on('success')和this.removeFile方法：

Dropzone.options.myDropzone = { 
    init: function() { 
     this.on('success', function(file, message) { 
      if (this.files.length > 1) { 
       this.removeFile(this.files[0]); 
      } 
     }); 

     // ... 
    } 
}; 

對於這個工作，你mockFile也必須註冊爲懸浮窗的文件之一。要做到這一點，你可以把它變成了this.files陣列在init，顯示後立即：

// Create and Display Mock File 
var mockFile = { name: "avatar1.jpg", size: 12345, url: '/image.png' }; 
this.options.addedfile.call(this, mockFile); 
this.options.thumbnail.call(this, mockFile, mockFile.url); 

// Register it 
this.files = [mockFile]; 

---

來源： Dropzone#SuccessEvent， Dropzone#Methods和經驗