如何使用blueimp文件上传生成的图片预览？

Question

我在 angular 中使用 blueimp 的 jquery-file-upload 成功地使用了 java 后端。它通过对每个文件的 POST 调用正确上传。 jquery.fileupload-image.js 的内置缩略图预览在选择文件时出现，但在完成时消失。

我无法在我的服务器上存储我自己生成的缩略图，所以我想知道我是否可以注入这些预览。我将如何显示这些预览？

前端（在 ng-repeat 内）：

        <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

我可以通过

显示前端生成的预览缩略图

HTML:

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

控制器：

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

        });

如何使用blueimp文件上传生成的图片预览？

How to use the image previews generated by blueimp file upload?

angularjs

jquery-file-upload

blueimp