AngularJS File Upload using PHP Steps

AngularJS File Upload using PHP Steps

In this Post We Will Explain About is AngularJS File Upload using PHP Steps 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 Upload file with AngularJS and PHPExample

In this post we will show you Best way to implement AngularJS – simple image upload with preview example in PHP, hear for File Upload Using AngularJS with PHP Script with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

file_upload.php

$get_file_name);
echo json_encode($arr);

?>

Example 1 : Upload file with AngularJS and PHP

  
  <title>Step By Step Upload file with AngularJS and PHP Devloed By infinityknow.com</title>
  
  <a href="http://angular.min.js">http://angular.min.js</a>


  <div>
      
      
      <button>File Upload</button>
      
      <p>{{ results.name }}</p>
  </div>
 
  
  var liveApp = angular.module('liveApp', []);
  
  liveApp.controller('liveController', ['$scope', '$http', function ($scope, $http) {
    $scope.livefileupload = function(){
        var file = $scope.uploadfile;
        var form_data = new FormData();
        var files = document.getElementById('file').files[0];
        form_data.append('file',files);
        
        $http({
          method: 'post',
          url: 'file_upload.php',
          data: form_data,
          headers: {'Content-Type': undefined},
        }).then(function successCallback(results) { 
          // Store results data
          $scope.results = results.data;
        });
    }
  
  }]);

  

Example 2 : File Upload Using AngularJS with PHP Script

  
  <title>Step By Step File Upload Using AngularJS with PHP Script Devloed By infinityknow.com</title>
  
 <a href="http://angular.min.js">http://angular.min.js</a>


  <div>
      
      
      <button>Upload</button>
      
      <p>{{ results.name }}</p>
  </div>
 
  <!-- Script -->
  

    var liveApp = angular.module('liveApp', []);
    liveApp.directive('ngFile', ['$parse', function ($parse) {
        return {
           restrict: 'A',
           link: function(scope, element, attrs) {
              element.bind('change', function(){

              $parse(attrs.ngFile).assign(scope,element[0].files)
                 scope.$apply();
              });
           }
        };
    }]);

    liveApp.controller('liveController', ['$scope', '$http', function ($scope, $http) {
        
            $scope.livefileupload = function(value){
                var form_data=new FormData();
                angular.forEach($scope.uploadfiles,function(file){
                    form_data.append('file',file);
                });
       
                $http({
                    method: 'post',
                    url: 'file_upload.php',
                    data: form_data,
                    headers: {'Content-Type': undefined},
                }).then(function successCallback(results) { 
                    // Store results data
                    $scope.results = results.data;
                });
        }
  
    }]);

  

Example

I hope you have Got What is image upload example in angularjs 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.