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

     });