如何在AngularJS中預覽上傳的文件

我正在使用Angular File Upload。如何在AngularJS中預覽上傳的文件

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

有誰知道預覽圖像的編碼？由於

來源

2016-04-22 Lokendra Panwar

你想只預覽上傳的圖片文件？ –

是的，我只想預覽上傳的圖像文件 –

我已經適應在this StackOverflow 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的代碼更改。

在下面的圖片你可以看到一個圖片上傳的結果：

來源

2016-04-22 09:36:12

如何在AngularJS中預覽上傳的文件

回答

相關問題