In this Example we learn how simple image upload using angularjs.Here i explain how to upload the pic and after upload pic how to fetch and preview on screen, show the how to download the image using angularjs.
In this example we not use any custom directive for upload image.
Example:-
Html:-
<!DOCTYPE html>
<html ng-app="unified">
<head>
<meta charset="utf-8" />
<title>Image Upload</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container" >
<div class="row">
<button class="btn btn-primary pull-right" ng-hide="images.length == 0" ng-click="clearAll()">Clear All</button>
<h3 ng-bind="name"></h3>
<input type="file" ng-click="$event = $event" ng-model="display" multiple onchange="angular.element(this).scope().upload(event)" accept="image/png, image/jpeg, image/gif" />
<div class="row">
<div class="col-md-12"> <span ng-repeat='img in images'> <a href="#" ng-click="setImage($index)">
<img ng-src="{{img}}"
alt="Generic placeholder thumbnail" style="max-height:100px;" class="thumbnail"/>
</a>
</span>
</div>
</div>
<img ng-src="{{display}}" ng-hide="!display" />
</div>
</div>
</body>
</html>
Script:-
var app = angular.module('unified', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Select Files to Upload";
$scope.images = [];
$scope.display = $scope.images[$scope.images.length - 1];
$scope.setImage = function (ix) {
$scope.display = $scope.images[ix];
}
$scope.clearAll = function () {
$scope.display = '';
$scope.images = [];
}
$scope.upload = function (obj) {
var elem = obj.target || obj.srcElement;
for (i = 0; i < elem.files.length; i++) {
var file = elem.files[i];
var reader = new FileReader();
reader.onload = function (e) {
$scope.images.push(e.target.result);
$scope.display = e.target.result;
$scope.$apply();
}
reader.readAsDataURL(file);
}
}
});
Now we have set all things above script add in head section or before body end of page
It work fine let see the output.
Example Link
Hope you like the post .Please share and comment below or customer care section.
Thanks.
0 Comments