Return to Answer

replaced http://stackoverflow.com/ with https://stackoverflow.com/

Source Link

edited May 23, 2017 at 11:55

URL Rewriter Bot

I also needed this feature, some how I manage to display image instantly.

angular.module('HelloWorldApp', [])
   .controller('HelloWorldController', function($scope) {
       $scope.uploadavtar = function(files) {
        //var fd = new FormData();
        //Take the first selected file
        //fd.append("file", files[0]);
        
        var imagefile = document.querySelector('#file');
                if (imagefile.files && imagefile.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('#temp_image')
                            .attr('src', e.target.result);
                    };
                    reader.readAsDataURL(imagefile.files[0]);
                    this.imagefile = imagefile.files[0];
                }else{
                    console.log("Image not selected");
                }
        
        
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="HelloWorldApp">
    <div ng-controller="HelloWorldController">
        <input type="file" id="file" onchange="angular.element(this).scope().uploadavtar(this.files)"/>
    </div>
      <img src="" id="temp_image" width="100">
    <div>
    </div>
</div>

I was using laravel + Angularjs so another related post to store image is : http://stackoverflow.com/a/34830307/2815635 https://stackoverflow.com/a/34830307/2815635

I also needed this feature, some how I manage to display image instantly.

angular.module('HelloWorldApp', [])
   .controller('HelloWorldController', function($scope) {
       $scope.uploadavtar = function(files) {
        //var fd = new FormData();
        //Take the first selected file
        //fd.append("file", files[0]);
        
        var imagefile = document.querySelector('#file');
                if (imagefile.files && imagefile.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('#temp_image')
                            .attr('src', e.target.result);
                    };
                    reader.readAsDataURL(imagefile.files[0]);
                    this.imagefile = imagefile.files[0];
                }else{
                    console.log("Image not selected");
                }
        
        
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="HelloWorldApp">
    <div ng-controller="HelloWorldController">
        <input type="file" id="file" onchange="angular.element(this).scope().uploadavtar(this.files)"/>
    </div>
      <img src="" id="temp_image" width="100">
    <div>
    </div>
</div>

I was using laravel + Angularjs so another related post to store image is : http://stackoverflow.com/a/34830307/2815635

I also needed this feature, some how I manage to display image instantly.

angular.module('HelloWorldApp', [])
   .controller('HelloWorldController', function($scope) {
       $scope.uploadavtar = function(files) {
        //var fd = new FormData();
        //Take the first selected file
        //fd.append("file", files[0]);
        
        var imagefile = document.querySelector('#file');
                if (imagefile.files && imagefile.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('#temp_image')
                            .attr('src', e.target.result);
                    };
                    reader.readAsDataURL(imagefile.files[0]);
                    this.imagefile = imagefile.files[0];
                }else{
                    console.log("Image not selected");
                }
        
        
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="HelloWorldApp">
    <div ng-controller="HelloWorldController">
        <input type="file" id="file" onchange="angular.element(this).scope().uploadavtar(this.files)"/>
    </div>
      <img src="" id="temp_image" width="100">
    <div>
    </div>
</div>

I was using laravel + Angularjs so another related post to store image is : https://stackoverflow.com/a/34830307/2815635

Source Link

answered Mar 25, 2017 at 11:08

Niklesh Raut

34.9k
17
82
112

I also needed this feature, some how I manage to display image instantly.

angular.module('HelloWorldApp', [])
   .controller('HelloWorldController', function($scope) {
       $scope.uploadavtar = function(files) {
        //var fd = new FormData();
        //Take the first selected file
        //fd.append("file", files[0]);
        
        var imagefile = document.querySelector('#file');
                if (imagefile.files && imagefile.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('#temp_image')
                            .attr('src', e.target.result);
                    };
                    reader.readAsDataURL(imagefile.files[0]);
                    this.imagefile = imagefile.files[0];
                }else{
                    console.log("Image not selected");
                }
        
        
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="HelloWorldApp">
    <div ng-controller="HelloWorldController">
        <input type="file" id="file" onchange="angular.element(this).scope().uploadavtar(this.files)"/>
    </div>
      <img src="" id="temp_image" width="100">
    <div>
    </div>
</div>

I was using laravel + Angularjs so another related post to store image is : http://stackoverflow.com/a/34830307/2815635

Collectives™ on Stack Overflow

Return to Answer