如何使用blueimp文件上傳生成的圖片預覽？

Question

我正在使用blueimp的jquery-file-upload成功地與java後端進行角度轉換。它正確上傳每個文件的POST調用。 jquery.fileupload-image.js中的內置縮略圖預覽會在選擇文件時顯示，但在完成時會消失。

我無法將我自己生成的縮略圖存儲在我的服務器上，因此我想知道是否可以只注入這些預覽。我將如何顯示這些預覽？

前端（內部NG-重複）：

 <td data-ng-switch data-on="!!file.thumbnailURL"> 
     <div class="preview" data-ng-switch-when="true"> 
//shows when upload complete.. unsure what to put here 
     <div class="previewImage"></div> 
     </div> 
     <div class="preview" data-ng-switch-default data-file-upload-preview="file"> 
//already shows generated preview before upload finishes</div> 
    </td> 

而且我相信我需要做這樣的事情在控制器：

//Listen to upload library for successful upload 
     $scope.$on('fileuploaddone', function(e,data){ 
      if (data.files[0].preview){ 
       //inject preview somehow to DOM's .previewImage? 
      } 
     }) 

Answer 1

我能夠顯示前端

<img id="preview-image" width="auto" height="auto" alt=""></img> 

：做

HTML生成預覽縮略圖210

控制器：

$scope.$on('fileuploadprocessalways', function(e, data){ 
       if (data.files[0].preview){ 
        var canvas = data.files[0].preview; //grab the preview 
        var dataURL = canvas.toDataURL(); //grab the url 
        $("#preview-image").css("background-image", 'url(' + dataURL +')'); //give it to DOM 
        $("#preview-image").css("height", canvas.height); 
        $("#preview-image").css("width", canvas.width); 
        console.log("Injecting canvas with dimensions: "+canvas.width+"x"+canvas.height); 
       } 

     });