Simple image upload with preview Angularjs example in PHP

Today, We want to share with you angularjs image upload with preview.In this post we will show you upload and display image in angularjs, hear for multiple image upload with preview and delete angularjs we will give you demo and example for implement.In this post, we will learn about angularjs file upload example with an example.

Preview Image before uploading Angularjs

  • 1)index.php
  • 2)do_profile_upload.php
  • 3)images(images is a directory, it should on root path)
Read Also:  javascript difference between two dates in years months days

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

Angularjs image upload example using PHP

index.php

<!DOCTYPE html>
<html>
<head>
  <title>Angularjs Image Uploading - www.pakainfo.com</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="MemberController">


	<!-- 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('MemberController', function($scope, $http) {


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


	      $scope.submit = function() {
	      	$scope.form.image = $scope.files[0];


	      	$http({
			  method  : 'POST',
			  url     : '/do_profile_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>

do_profile_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";
	}
?>

I hope you get an idea about angularjs image upload demo.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  PHP Laravel 5.6 Dynamically Add Active class

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  how to call curl with get, post, put, delete in php?
  2. Read Also:  How to encode a PHP file with base64? - base64 encode php script
  3. Read Also:  Renaming file while uploading Laravel
  4. Read Also:  Angular Dynamic Add ng-click function
  5. Read Also:  jQuery multiple carousel image slider
  6. Read Also:  PHP Magento Configure Product Attribute sets
  7. Read Also:  Laravel Fix RuntimeException (You need to specify a file path to store the seed laravel)
  8. Read Also:  how to check array is empty in php?
  9. Read Also:  PHP Laravel 5.6 Dynamically Add Active class
  10. Read Also:  Laravel Fix RuntimeException (You need to specify a file path to store the seed laravel)
CLOSEX