AngularJS Store and Retrieve Image from MySQL Database using PHP

AngularJS Store and Retrieve Image from MySQL Database using PHP

In this Post We Will Explain About is AngularJS Store and Retrieve Image from MySQL Database using PHP With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Angular Multiple File Upload with PHP and MySQL Example

In this post we will show you Best way to implement AngularJS Upload Image to Database and Server using HTML,PHP and MySQL, hear for Insert Image Into Database and folder in AngularJS, PHP, MYSQL with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   VueJs Autocomplete using Laravel Example




index.php

AngularJS with PHP- upload and display image using FileReader with Save in folder example

<!DOCTYPE html>
<html>
<head>
  <title>AngularJS PHP Live24u.com- Angularjs upload and display image in FileReader with Demo and Example</title>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
   <script type="text/javascript">
        var liveApp =  angular.module('liveApp',[]);
        liveApp.service('studentPicUpload', ['$http', function ($http) {
            this.uploadFiletoServer = function(file, uploadUrl){
                 var fildatd = new FormData();
                 fildatd.append('file', file);
                 $http.post(uploadUrl, fildatd, {
                     transformRequest: angular.identity,
                     headers: {'Content-Type': undefined,'Process-Data': false}
                 })
                 .success(function(data){
                    alert(data);
                 })
                 .error(function(){
                    alert("generate Error");
                 });
             }
         }]);
    liveApp.controller('live24Ctrl',  ['$scope', 'studentPicUpload', function($scope, studentPicUpload){
          $scope.studentPicUpload = function() {
              $scope.lvFilepic = $scope.files[0];
             var file = $scope.lvFilepic; 
            var url = "do_insert_upload.php";
            studentPicUpload.uploadFiletoServer(file, url);
          };
     $scope.uploadedFile = function(element) {
            var reader = new FileReader();
            reader.onload = function(event) {
             $scope.$apply(function($scope) {
                $scope.files = element.files;
                 $scope.src = event.target.result  
             });
            }
            reader.readAsDataURL(element.files[0]);
          }
    }]);
 </script>
<body>
</head>
<body ng-app="liveApp" ng-controller="live24Ctrl">
    <input type="file" ng-model="lvFilepic" class="form-control"  onchange="angular.element(this).scope().uploadedFile(this)">
    <button ng-click = "studentPicUpload()">upload Image</button>
    <br/>

</body>
</html>

do_insert_upload.php

Also Read :   PHP Get Dropdown list of all Timezones

<?php
	$db_conn=mysqli_connect("localhost","USER_NAME","YOUR_PASSWORD","live24u");
    if(!empty($_FILES['file'])){
		$liveext = pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
		$image = time().'.'.$liveext;
		move_uploaded_file($_FILES["file"]["tmp_name"], 'images/media/'.$image);
		mysqli_query($db_conn,"INSERT INTO student_mst(profile_pic) VALUES('$image')");
	    echo "Your Profile pic successfully uploaded";

    }
?>

From the above(insert-image-to-db-using-angularjs) source code, variable database db_conn is used for mysql with PHP database connection. From there the live24u is the databasename

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is Angularjs upload an image and store in database using php And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.