如何以編程方式將縮略圖添加到Dropzone？

我正在使用Dropzone允許用戶上傳文件，以允許用戶將圖像與頁面上幾個標題之一相關聯。我以編程方式生成Dropzones，每個標題一個，並且當文件上傳時，我保存在一個數據庫中，該標題與哪個上傳文件相關聯。如何以編程方式將縮略圖添加到Dropzone？

我非常喜歡上傳文件時生成的Dropzone縮略圖。在頁面加載中，我想查詢服務器上的現有圖像，並將這些圖像放在正確的dropzone的縮略圖中。

如何以編程方式將URL中的縮略圖關聯到特定的Dropzone？

我dropzones的代碼是：

$(function() { 

$('.newdrop').each(function (index) { 

    var id = parseInt($(this).closest("a").attr("id")); 
    var dropzoneID = "#drop" + id; 

    var newDropzone = new Dropzone(dropzoneID, { 
      url: "/VoltLink/SaveUploadedFiles/" + id, 
      clickable: false, 
      maxFiles: 1, 

     init : function() { 
     this.on("addedfile", function() { 
      if (this.files[1]!=null){ 
       this.removeFile(this.files[0]); 
      } 
     }); 
    } 

     } 
    );  

}); 
});

我有一個服務器端功能的查詢，發現標題與圖片，這就要求通過SignalR的方法

lnk.client.updateImage = function(image) { 

    var headingID = image.ID; 

    $('#' + headingID + ' .existingImage').html(image.imageURL); 

}

如何使用'image.imageURL'來激活dropzone縮略圖？

來源

2014-09-05 RamblerToning

對於您要添加的每個圖像，你必須：

創建描述存儲在服務器（包括名稱，大小和懸浮窗實例所使用的其他信息）文件的對象;
調用「addedfile」事件處理程序，傳遞上一步中創建的對象;
調用「縮略圖」事件處理程序顯示新圖像，傳遞相同的對象和縮略圖URL。

在我來說，我使用這些指令：

var myFile = { 
    name: "image-name-example", 
    size: 987654321 
}; 

var myDropzone = Dropzone.forElement("my-dropzone-form"); 
myDropzone.emit("addedfile", myFile); 
myDropzone.emit("thumbnail", myFile, "http://url/to/my/thumbnail");

您可以在項目wiki找到解釋該過程：

來源

2014-09-09 14:18:32 Palleraccio

如何以編程方式將縮略圖添加到Dropzone？

回答

相關問題