문제가 있습니다. Angular.js에서 ng-file-upload
을 선택하여 이미지를 표시 할 수 없습니다. 여기에 여러 개의 파일을 업로드해야합니다. 아래 코드를 설명하고 있습니다.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'ngf-src'를 사용하십시오. – danial