如何在 AngularJS 中预览上传的文件

Question

我正在使用 Angular 文件上传。

http://plnkr.co/edit/qLckEIlNLEcIfvwn4Q5x?p=preview

我想在上传文件时进行上传预览。你能给我什么建议吗？这是 HTML 代码：

<div class="form-group">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
  <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i>  <span class="fileinput-filename"></span>
  </div>
  <span class="input-group-addon btn btn-default btn-file">
    <span class="fileinput-new">Select to Upload file</span>
    <input id="fileupload" file-upload="fileUploadOptions" type="file" name="attData" multiple data-sequential-uploads="true" />
  </span>
</div>

这是我的控制器：

 angular.module("myapp", ["ngAnimate", "ngSanitize", "ui.bootstrap"])
  .controller("Ctrl", function($scope, $modal, $log) {

    $scope.openModal = function() {
      $log.log("opening modal");
      var modURL = "modalwindow.html";
      var theModal = $modal.open({
        scope: $scope,
        templateUrl: modURL,
        controller: 'detailController',
        size: 'lg'
      });
      theModal.opened.then(function() {
        $log.log("modal opened");
      });
    };
  })
  .controller('detailController', function($scope, $modalInstance) {

    $scope.fileUploadOptions = {
      notetext: "text",
      progress: 0
    };

    $scope.closeModal = function() {
      $modalInstance.close();
    };
  })
  .directive('fileUpload', function($log, $parse) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var options = $parse(attrs.fileUpload)(scope) || {};

        element.fileupload({
          dataType: 'json',
          url: '//jquery-file-upload.appspot.com/',
          done: function(e, data) {
            $log.log("done accessed");
          },
          fail: function(e, data) {
            $log.log("fail accessed");
          },
          progress: function(e, data) {
            options.progress = parseInt(data.loaded / data.total * 100, 10);
            scope.$apply();
            $log.log(options)
            $log.log("progress");
          },
          //add: function(e,data){
          //$log.log("add accessed");
          //},
          submit: function(e, data) {
            $log.log("notetext:", options.notetext);
            data.formData = {
              Description: options.notetext
            };
            $log.log("submit accessed");
          }
        });
      }
    }
  });

有谁知道预览图片的编码方式吗？谢谢

Answer 1

我已将 this Whosebug question 中提供的解决方案应用到您的案例中，它使用名为 fileReader:

的服务

          submit: function(e, data) {
            $log.log("notetext:", options.notetext, data);
            scope.file = data.files[0]
            data.formData = {
              Description: options.notetext
            };
            fileReader.readAsDataUrl(scope.file, scope)
                          .then(function(result) {
                              scope.imageSrc = result;
                          })
            $log.log("submit accessed");
          }

检查此 Plunker 中的代码更改。

在下图中您可以看到图片上传的结果：

如何在 AngularJS 中预览上传的文件

How to preview uploaded file in AngularJS

jquery-ui

twitter-bootstrap

angularjs

ng-file-upload