index.html
//index.html
<!DOCTYPE html>
<html>
<head>
<title>Angularjs PHP Image Upload With Preview</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="main-App" ng-controller="MemberController">
<div class="container py-5">
<header class="text-white text-center">
<h1 class="display-4">Angularjs PHP Image Upload With Preview</h1>
</header>
<div class="row py-4">
<div class="col-lg-6 mx-auto">
<form ng-submit="submit()" name="form" role="form">
<div class="input-group mb-3 px-2 py-2 rounded-pill bg-white shadow-sm">
<input id="upload" ng-model="form.image" type="file" accept="image/*" onchange="angular.element(this).scope().uploadedFile(this)" class="form-control border-0">
<label id="upload-label" for="upload" class="font-weight-light text-muted">Choose file</label>
<div class="input-group-append">
<label for="upload" class="btn btn-light m-0 rounded-pill px-4"> <i class="fa fa-cloud-upload mr-2 text-muted"></i><small class="text-uppercase font-weight-bold text-muted">Choose file</small></label>
</div>
</div>
<input type="submit" id="submit" value="Submit" class="btn btn-info"/>
<!-- Uploaded image area-->
<p class="font-italic text-white text-center">The image uploaded will be rendered inside the box below.</p>
<div class="image-area mt-4"><img ng-src="{{image_source}}" alt="" class="img-fluid rounded shadow-sm mx-auto d-block"></div>
</form>
</div>
</div>
</div>
<style>
#upload {
opacity: 0;
}
#upload-label {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
}
.image-area {
border: 2px dashed rgba(255, 255, 255, 0.7);
padding: 1rem;
position: relative;
}
.image-area::before {
content: 'Uploaded image result';
color: #fff;
font-weight: bold;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.8rem;
z-index: 1;
}
.image-area img {
z-index: 2;
position: relative;
}
body {
min-height: 100vh;
background-color: #757f9a;
background-image: linear-gradient(147deg, #757f9a 0%, #d7dde8 100%);
}
</style>
<script type="text/javascript">
var app = angular.module('main-App',[]);
app.controller('MemberController', 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
//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 "Profile Image uploaded successfully as ".$image;
}else{
echo "Profile Image Is Empty";
}
?>
