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

【问题标题】：How to use the image previews generated by blueimp file upload?如何使用 blueimp 文件上传生成的图片预览？
【发布时间】：2016-08-23 13:09:53
【问题描述】：

我在 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?
            }
        })

【问题讨论】：

标签： angularjs jquery-file-upload blueimp

【解决方案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);
              }

        });

【讨论】：