Мне нужна одна помощь. У меня есть один значок изображения, когда пользователь выберет тот значок, который откроет диалоговое окно файла, и пользователь выберет изображение. После выбора изображения изображение должно отображаться на этом значке изображения. Я объясняю свой код ниже.
<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;
});
});
Здесь мне нужно, когда пользователь выберет изображение, которое изображение отобразит на этом изображении. Пожалуйста, помогите мне.
Я считаю, что вам нужно использовать reader.onloadend вместо reader.onload
reader.onloadend = function () {
// set $scope.attachImage to reader.result;
}