0

I need one help.I want to display image inside image tag when image will be selected.I am explaining my code below.

<div class="col-md-6 bannerimagefile" ng-controller="imgController">
<form  name="form">
<label for="bannerimage" accesskey="B"><span class="required">*</span> Banner Image</label>
<input type="file" class="filestyle" data-size="lg" name="bannerimage" id="bannerimage" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="20MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}">
<label for="bannerimage" accesskey="B" ><span class="required">*</span> View Image</label>
<div style="padding-bottom:10px;">
<img ng-src="{{attachImage}}" border="0" name="bannerimage" style="width:70px; height:70px;">
</div>
<div><input type="button" id="btn" ng-click="submitImage();" value="Upload" /></div>
<div class="clear"></div>
</form>
</div>

My controller file is given below.

var app=angular.module('testImage',['ngFileUpload']);
app.controller('imgController',function($scope,$http){
    $scope.submitImage=function(){
        console.log('image',$scope.file);
    }

});

Here my requirement is when user will select the image it will display inside the image tag which is given in my code using Angular.js.Please help me.

satya
  • 3,508
  • 11
  • 50
  • 130
  • provide your code on plunker – Upalr Dec 04 '15 at 04:09
  • @UR : Please find [this plunkr](http://plnkr.co/edit/OokYT9mLu65qbX4BJ2AD?p=preview) link. – satya Dec 04 '15 at 04:23
  • possible duplicate - 1 - http://stackoverflow.com/questions/31665305/angularjs-upload-and-display-image-using-filereader-api-multiple-files 2 - http://stackoverflow.com/questions/30347656/angularjs-show-image-preview-only-if-selected-file-is-image – NiRUS Dec 04 '15 at 04:35
  • Can you try `$scope.submitImage=function(){ $scope.attachImage = ; console.log('image',$scope.file); }` – domino_katrino Dec 04 '15 at 06:13

0 Answers0