Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Upload multiple image using AngularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 5.18k
    Comment on it

    Hello Readers,

    Hope you are doing good today.

    Today in My blog, I am going to explain how you can upload multiple files using AngularJS and PHP.

    First Create an index.html page and put required library file in  <head></head> section:

    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

    Then Add below code in your index.html page .

    <body ng-app="myApp">
        <div ng-controller="myCntrl">
    
            <input type="file" id="file1" name="file" multiple 
                ng-files="getTheFiles($files)" required />
            <input type="button" ng-click="uploadFiles()" value="Upload" />
             <h1 ng-bind="msg"></h1>        
        </div>
    </body>

    Put blow script

    <script type="text/javascript">
            angular.module('myApp', [])
            .directive('ngFiles', ['$parse', function ($parse) {
    
                function fn_link(scope, element, attrs) {
                    var onChange = $parse(attrs.ngFiles);
                    element.on('change', function (event) {
                        onChange(scope, { $files: event.target.files });
                    });
                };
                return {
                    link: fn_link
                }
            } ])
            .controller('myCntrl', function ($scope, $http) {
    	//Get File
                var formdata = new FormData();
                $scope.getTheFiles = function ($files) {              
                    angular.forEach($files, function (value, key) {
                        formdata.append(key, value);
                    });
                };
                // NOW UPLOAD THE FILES.
                $scope.uploadFiles = function () {
    
                    var request = {
                           method: 'POST',
                           url: 'uploadFile.php',
                           data: formdata,
                           headers: {
                               'Content-Type': undefined
                           }
                    };
                       $http(request).success(function(data) {
                         $scope.msg=data.message;                 
                          console.log('success!');
                        })
                        .error(function(data) {
                          $scope.msg=data.message;
                        });
                }
            });
          </script>

    uploadFile.php File you can change according to your requirement

    if(isset($_FILES) && (count($_FILES)) > 0){
    			$cnt=count($_FILES);
    			foreach ($_FILES as $key=>$file) {
    						$filename=basename($_FILES[$key]['name']);
    						//echo '<pre>';print_r($filename);			
    						$ext=pathinfo($filename,PATHINFO_EXTENSION);
    						$file1= $_FILES[$key]['tmp_name'];					
    						$base_dir='/fileUpload/';
    						$new_file_name = time().'.'.$ext;
    						$target=$base_dir.$filename;					
    						$move=move_uploaded_file($file1, $target);	 						
    			}	
    			if($move){
    						echo json_encode(array('status' => 'success', 'message' =>'File is valid, and was successfully uploaded'));				
    			} else {
    						echo json_encode(array('status' => 'failure', 'message' =>'Upload failed'));							
    			}
    			
    }
    else
    {
    		echo json_encode(array('status' => 'failure', 'message' =>'Select File'));	
    }

    I hope this will help you. Please feel free to give us your feedback in comments.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: