April 4, 2023
Category : PHP
Javascript
jQuery
Angular
AngularJS - simple image upload with preview example in PHP
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" class="form-control input-lg" 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...
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
