简体   繁体   中英

Image can not be displayed after upload using Angular.js

I have an issue. I can not display image after selecting using ng-file-upload from Angular.js. I have to upload multiple file here. I am explaining my code below.

<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>

my controller side code is given below.

$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 i need after selecting the image it should display inside image tag but failed to do that. Here is my plunkr code. Please help me to resolve this issue.

You used 'onFileSelect' in your view and defined $scope.onFileSelect1. If I edit it the plunkersample runs for me. Or am I missing something?

在此处输入图片说明

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM