Как я могу изменить изображение профиля при нажатии на существующее изображение в angularjs?

Question

Как я могу изменить изображение профиля при нажатии на существующее изображение в angularjs?

1

Я работаю с чат-приложением. Здесь я должен написать code для изображения профиля пользователя так, чтобы пользователь мог редактировать его фотографию профиля.

Как я могу реализовать этот код в 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>

srujana 10 июнь 2017, в 09:24

Источник

Теги:

javascript

2 ответа

0

Используя jquery, я сделал это

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

Mr_Perfect 10 июнь 2017, в 04:32

Ещё вопросы

Commercial Suicide · Accepted Answer · 2017-06-10T04-50-00.000Z

Вы можете добавить атрибут ng-src к изображению и написать метод onchange для 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]);
  }
});

И вот рабочий jsfiddle

Сначала вопрос касался решения angularjs, поэтому я добавил решение angularjs.