AngularJS Multiple Images uploading using PHP

AngularJS Multiple Images uploading using PHP

AngularJS Multiple Images uploading using PHP

In this Post We Will Explain About is AngularJS Multiple Images uploading using PHP With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS File Upload using $http post and FormDataExample

In this post we will show you Best way to implement File Upload Using AngularJS with php server script, hear for Angularjs multiple image upload using ajax and phpwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

index.html

Make a HTML file and define markup

READ :  vuejs Table Searching Sorting and Pagination

<h1>AngularJS Multiple Image upload using PHP</h1>

    <div class="file-upload">
        
        
        <button>Upload</button>
    </div>

app.js

Make a js file and define scripting

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

var liveApp = angular.module('liveApp', []);

liveApp.directive('fileModel', ['$parse', function ($parse) {
    return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;

        element.bind('change', function(){
            scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
            });
        });
    }
   };
}]);

liveApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, fileuploaduri, name){
         var fd = new FormData();
         fd.append('file', file);
         fd.append('name', name);
         $http.post(fileuploaduri, fd, {
             transformRequest: angular.identity,
             headers: {'Content-Type': undefined,'Process-Data': false}
         })
         .success(function(){
            console.log("Your File/images Success");
         })
         .error(function(){
            console.log("error");
         });
     }
 }]);

 liveApp.controller('liveCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
   $scope.multiImagesUpload = function(){
        var file = $scope.myimgfile;
        console.log('file is ' );
        console.dir(file);

        var fileuploaduri = "do_submit_save.php";
        var text = $scope.name;
        fileUpload.uploadFileToUrl(file, fileuploaduri, text);
   };

}]);

do_submit_save.php

PHP server side scripting Languages as well as “do_submit_save.php” PHP file move_uploaded_file to your root folder /upload/products/ put all the images.

READ :  Angularjs cookie Set Cookie Get Cookie Delete Cookie Example

 connect_error) {
        die("Database Connection failed: " . $db_conn->connect_error);
     }

     $sql_query = "INSERT INTO live_product_mst (name,filename) VALUES ('".$name."','".basename($_FILES["file"]["name"])."')";

     if ($db_conn->query($sql_query) === TRUE) {
         echo json_encode($_FILES["file"]); // simple response new file uploaded
     } else {
        echo "Error: " . $sql_query . "<br>" . $db_conn->error;
     }

     $db_conn->close();

?>

Example

I hope you have Got What is Angularjs Upload multiple images using jQuery, Ajax, PHP And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.