Я работаю с чат-приложением. Здесь я должен написать 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>
Вы можете добавить атрибут 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
Используя 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);
}
}
}