Question

我需要一个帮助。我有一个图像图标，当用户选择该图标时，文件对话框将打开，用户将选择图像。选择图像后，图像应显示在该图像图标上。我正在解释我的代码下方。

<div class="image-upload">
  <label for="bannerimage">
   <img src="{{attachImage}}"/>
  </label>
  <input type="file"  data-size="lg" name="bannerimage" id="bannerimage"  ng-model="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}"  custom-on-change="uploadFile" required="required" ngf-select="onFileSelect($file);"  ngf-multiple="true">
</div>

我的控制器端代码如下所示。

$scope.attachImage="upload/logo.png";
$scope.uploadFile = function(event){
  console.log('event',event.target.files);
  var files = event.target.files;
  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() {
    //var data={'image':e.target.result};
    // $scope.stepsModel.push(data);
    //$scope.myImage=e.target.result;
    $scope.attachImage='';
    $scope.attachImage=$scope.myImage;
  });
});

在此我需要用户选择图像将在该特定图像图标上显示的图像。请帮助我。

Answer 1

我相信你需要使用reader.onloadend而不是reader.onload

reader.onloadend = function () {
    // set $scope.attachImage to reader.result;
  }

使用Angular.js选择后如何显示图像

1 个答案: