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)