2016-09-05 3 views
0

У меня проблема. Я не могу отобразить изображение после выбора с помощью 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 код. Пожалуйста, помогите мне решить эту проблему.

+0

Это один выглядит очень дружелюбный :) https://github.com/danialfarid/ng-file-upload –

+0

да, я также использую это, но не в состоянии отобразить изображение. – subhra

+0

Вот рабочий пример: https://plnkr.co/edit/W0Js9DEj07Eq5qxiFQz8?p=preview use 'ngf-src' – danial

ответ

-1

Вы использовали 'onFileSelect' в своем представлении и определили $ scope.onFileSelect1. Если я отредактирую его, то plunkersample будет работать для меня. Или я что-то упускаю?

enter image description here

+0

Моя проблема была в том, что я не смог просмотреть изображение. – subhra

+0

Хорошо, извините, я что-то не понял. Где вы хотите его просмотреть? Я думал, что вы хотите отобразить загруженное изображение слева от кнопки «зеленый плюс». И, как вы можете видеть, это сработало для меня. Только фотография никогда не была загружена. –