如何在单击angularjs中的现有图像时更改配置文件图像？

Question

I am working with chat application . Here I have to write a code for profile picture of the user in the way that user can edit his profile picture.

How can I implement this code in javascript ?

  <div class="well"> <h1><img src="user.png" class="img-circle" width="80" height="80" ng-click="imgFn()"> <input type="file" accept="image/*" ng-hide="true" style="font-size:15px"><small>Username</small> </h1> </div> 

Answer 1

Using jquery I did that

<div class="photo photo-margin">
     <input type="file" onchange="fileChanged()" accept="image/png,image/jpg,image/jpeg">
     <img src="#" class="show-added-photo" id="photoFile"> 
</div>

JS CODE

// Below function is used to call readURL to add image
function fileChanged() {
    var vals = $(this).val(),
        val = vals.length ? vals.split('\\').pop() : '';
        readURL(this);
};

// Below function to read image URL
function readURL(input) {
    if (input.files && input.files[0]) { // if file are there in page
        var reader      = new FileReader(); // get file reader

        // onload executed on file reader load
        reader.onload   = function(e) {
            $('.show-added-photo').attr('src', e.target.result);
        }
    }
}

Answer 2

You can add ng-src attribute to image and write onchange method for the input .

HTML:

<div ng-app="testApp" ng-controller="testController">
    <div class="well">
        <h1><img src="user.png" class="img-circle" width="80" height="80" ng-click="imgFn()" ng-src="{|imageSource|}">
            <input type="file" accept="image/*" ng-model="imageSrc" onchange="angular.element(this).scope().fileNameChaged(this)" style="font-size:15px">
            <small>Username</small>
        </h1>
    </div>
</div>

Javascript:

var app = angular.module('testApp', []).config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('{|');
  $interpolateProvider.endSymbol('|}');
});

app.controller('testController', function($scope){
  $scope.imageSrc = ""
  $scope.fileNameChaged = function(element) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $scope.$apply(function() {
        $scope.imageSource = e.target.result;
      });
    }
    reader.readAsDataURL(element.files[0]);
  }
});

And here is the working jsfiddle