Как отобразить изображение после выбора с помощью Angular.js

0

Мне нужна одна помощь. У меня есть один значок изображения, когда пользователь выберет тот значок, который откроет диалоговое окно файла, и пользователь выберет изображение. После выбора изображения изображение должно отображаться на этом значке изображения. Я объясняю свой код ниже.

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

Здесь мне нужно, когда пользователь выберет изображение, которое изображение отобразит на этом изображении. Пожалуйста, помогите мне.

  • 0
    Где установить значение $ scope.myImage? попробуйте использовать ng-src вместо src.
  • 0
    blueimp.github.io/jQuery-File-Upload/angularjs.html реализует эту функцию в angular.js. возможно, вам не нужно заново изобретать колесо.
Показать ещё 3 комментария
Теги:
ng-file-upload

1 ответ

1

Я считаю, что вам нужно использовать reader.onloadend вместо reader.onload

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню