визуализировать изображение при смене

Question

есть ли способ для рендеринга изображения, которое я выбрал в angularjs ... нравится, как вы загружаете изображение здесь, в stackoverflow ... при выборе изображения, которое будет отображаться первым, прежде чем вы сможете загрузить ...

Я действительно новичок в этом так медведь со мной ..

контроллер

$scope.uploadFile = function(parameter){ 
    console.log(parameter[0]); 
    $scope.profilePic = parameter[0]; 
}; 

HTML

<div class="row"> 
    <div class="col-md-12"> 
     <img src="{{profilePic}}" class="img-responsive img-thumbnail"/> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-12"> 
     <input type="file" name="image_path" class="form-control" onchange="angular.element(this).scope().uploadFile(this.files)" /> 
    </div> 
</div> 

есть также проблема в использовании ng-change он дает мне ошибку .. анонимная ошибка функции ..

Answer 1

использование ng-src вместо src в

<img ng-src="{{profilePic}}" class="img-responsive img-thumbnail"/> 

ng-src будет приостановите назначение источника изображения, пока не появится изображение

проверить это plnk он работает так, как вы хотите, надеюсь, что это помогает

я только что добавили readURL(input) функцию, которая использует FileReader и преобразует загруженное изображение это читаемый формат

Answer 2

Я не вижу пользуешься ng-change u использует <input type="file" name="image_path" class="form-control" onchange="angular.element(this).scope().uploadFile(this.files)" />. U можете попробовать изменить onchange="angular.element(this).scope().uploadFile(this.files)" на ng-change="uploadFile(this.files)"