У меня проблема. Я не могу отобразить изображение после выбора с помощью ng-file-upload
от Angular.js. Мне нужно загрузить несколько файлов здесь. Я объясняю свой код ниже.Изображение не может быть отображено после загрузки с помощью Angular.js
<div ng-repeat="mul in mulImage">
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Image{{$index+1}}:</span>
<div>
<input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}" ng-model="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" custom-on-change="uploadFile" ngf-select="onFileSelect($index,$file);">
<div style="clear:both;"></div>
</div>
<span class="input-group-btn" ng-show="mulImage.length>0">
<img ng-src="{{attchImage}}" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="mul.image !=null">
<input type="button" class="btn btn-success" name="plus" id="plus" value="+" ng-click="addNewImageRow(mulImage);" ng-show="$last"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-" ng-show="mulImage.length>1" ng-click="deleteNewImageRow(mulImage,$index);">
</span>
</div>
</div>
Код моего контроллера приведен ниже.
$scope.uploadFile = function(event) {
console.log('event', $scope.mulImage.length);
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() {
$scope.attchImage = e.target.result;
});
}
Здесь мне нужно после выбора изображения, которое оно должно отображать внутри тега изображения, но этого не произошло. Here is my plunkr код. Пожалуйста, помогите мне решить эту проблему.
Это один выглядит очень дружелюбный :) https://github.com/danialfarid/ng-file-upload –
да, я также использую это, но не в состоянии отобразить изображение. – subhra
Вот рабочий пример: https://plnkr.co/edit/W0Js9DEj07Eq5qxiFQz8?p=preview use 'ngf-src' – danial