使用 ngRepeat 和 ng-src 时看不到要上传的图像预览

Question

我已经创建了一个 CodePen example 我的问题。

我正在使用 HTML5 FileReader 和 Angular 创建一个简单的多文件上传，其中包含要上传的图像的预览。

问题： 我没有在 ng-repeat 范围内获取选定的图像。但是，当我将其注销到控制台时，我确实获得了正确的图像数据……我做错了什么？

HTML:

<div class="container" ng-app="my.app" ng-controller="FileUploadController">
  <div class="row">
    <div class="page-header">
      <h3>File Upload Test</h3>
    </div>
    <input type="file" class="well" id="files" name="files[]" multiple onchange="angular.element(this).scope().upload()" />
    <span ng-repeat="x in images">
      <img ng-src="{{x}}" />
    </span>
  </div>
</div>

CSS:

img {
  max-height: 100px;
}

Javascript:

var app = angular.module("my.app", []);

app.controller("FileUploadController", function($scope) {
  $scope.images = [];

  $scope.upload = function() {
    var files = document.getElementById("files").files;

    if (files) {
      for (i = 0; i < files.length; i++) {
        if (files[i]) {
          var reader = new FileReader();

          reader.onload = function (e) {
            console.log(e.target.result);
            $scope.images.push(e.target.result);
          }

          reader.readAsDataURL(files[i]);
        }
      }
    }
  }; 
})

Answer 1

http://jsfiddle.net/orion514/kkhxsgLu/136/ 具有相同的工作实现。

<div ng-repeat="x in images">
<img class="thumb" ng-src="{{x}}" />

$scope.images = [];

$scope.imageUpload = function(event){
     var files = event.target.files; //FileList object

     for (var i = 0; i < files.length; i++) {
         var file = files[i];
             var reader = new FileReader();
             reader.onload = $scope.imageIsLoaded; 
             reader.readAsDataURL(file);
     }

    $scope.imageIsLoaded = function(e){
        $scope.$apply(function() {
            $scope.images.push(e.target.result);
        });
    }
}

Answer 2

尝试 $scope.$apply() 当您像下面这样修改集合时，

     reader.onload = function (e) {
        console.log(e.target.result);
        $scope.images.push(e.target.result);
        $scope.$apply();
      }

使用 ngRepeat 和 ng-src 时看不到要上传的图像预览

Can't see Preview of Image to Upload when using ngRepeat and ng-src

javascript

file-upload

filereader

angularjs

ng-repeat