Question

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

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

前端（内部重复）：

        <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文件上传生成的图片预览？

1 个答案: