AngularJS – simple image upload with preview example in PHP

AngularJS – simple image upload with preview example in PHP

In this post we will give you information about AngularJS – simple image upload with preview example in PHP. Hear we will give you detail about AngularJS – simple image upload with preview example in PHPAnd how to use it also give you demo for it if it is necessary.

Sometimes, we require to make image uploading with preview selected image before upload using AngularJS. So, This post will help you how to image or file upload in AngularJS and PHP.

In this example i didn’t user any plugin or directive for image upload. It is very simple so you can use very simple and anywhere. For front-end code write in AngularJS and back-end code write in PHP(for image upload code). It will also display preview of image before upload.

Example is working on bellow listed three things, you can see.

1)index.php

2)upload.php

3)images(images is a directory, it should on root path)

After this you can put code like as bellow, so let’s see bellow code.

index.php

<!DOCTYPE html>

<html>

<head>

<title>Angularjs Image Uploading</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

</head>

<body ng-app="main-App" ng-controller="AdminController">


<!-- Form Start -->

<form ng-submit="submit()" name="form" role="form">


<input ng-model="form.image" type="file" accept="image/*" onchange="angular.element(this).scope().uploadedFile(this)" style="width:400px" >

<input type="submit" id="submit" value="Submit" />

<br/>

<img ng-src="{{image_source}}" style="width:300px;">


</form>

<!-- Form End -->


<script type="text/javascript">


var app = angular.module('main-App',[]);


app.controller('AdminController', function($scope, $http) {


$scope.form = [];

$scope.files = [];


$scope.submit = function() {

$scope.form.image = $scope.files[0];


$http({

method : 'POST',

url : '/upload.php',

processData: false,

transformRequest: function (data) {

var formData = new FormData();

formData.append("image", $scope.form.image);

return formData;

},

data : $scope.form,

headers: {

'Content-Type': undefined

}

}).success(function(data){

alert(data);

});


};


$scope.uploadedFile = function(element) {

$scope.currentFile = element.files[0];

var reader = new FileReader();


reader.onload = function(event) {

$scope.image_source = event.target.result

$scope.$apply(function($scope) {

$scope.files = element.files;

});

}

reader.readAsDataURL(element.files[0]);

}


});

</script>


</body>

</html>

upload.php

<?php

if(!empty($_FILES['image'])){

$ext = pathinfo($_FILES['image']['name'],PATHINFO_EXTENSION);

$image = time().'.'.$ext;

move_uploaded_file($_FILES["image"]["tmp_name"], 'images/'.$image);

echo "Image uploaded successfully as ".$image;

}else{

echo "Image Is Empty";

}

?>

Now, you can check this…

Hope this code and post will helped you for implement AngularJS – simple image upload with preview example in PHP. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

30  +    =  34

We accept paid advance and paid guest Posting on our Site : Contact US