index.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
</head>
<body style="padding-top: 30px;">
<center><h2>Angular JS 1.7 <br> <b>Easiest Way To Upload Multiple Files</b></h2></center>
<div style="padding-top: 30px;" class="container" ng-app="myapp" ng-controller="myController" ng-init="select()">
<div class="col-md-12">
<input type="file" file-input="files" class="form-control" multiple/>
</div>
<div class="col-md-12" style="padding-top: 10px;">
<button class="btn btn-success form-control" ng-click="upload()">Upload</button>
</div>
</div>
</body>
</html>
<script>
var app = angular.module("myapp", []);
app.directive("fileInput", function($parse){
return{
link: function($scope, element, attrs){
element.on("change", function(event){
var files = event.target.files;
$parse(attrs.fileInput).assign($scope, element[0].files);
$scope.$apply();
});
}
}
});
app.controller("myController", function($scope, $http){
$scope.upload = function(){
var form_data = new FormData();
var count=0;
angular.forEach($scope.files, function(file){
form_data.append('file'+count, file);
count++;
});
form_data.append('count_of_files', count);
$http.post('upload_file.php', form_data,
{
transformRequest: angular.identity,
headers: {'Content-Type': undefined,'Process-Data': false}
}).then(function(response){
alert(response.data);
});
}
});
</script>
upload_file.php
<?php
for($i=0;$i<intval($_POST['count_of_files']);$i++)
{
if($_FILES['file'.$i]['name']!="" )
{
move_uploaded_file($_FILES['file'.$i]['tmp_name'], ''.$_FILES['file'.$i]['name']) or die ('cannot upload');
}
}
?>
Hello guys, this is
unpossible pog here.
unpossible pog here.
Today, I shall show
you the easiest way to upload mutiple files using ANGULAR JS 1.7 &
PHP.
you the easiest way to upload mutiple files using ANGULAR JS 1.7 &
PHP.
Before we that, if
you are linux user, then make sure that you have the permission to
upload anything.
you are linux user, then make sure that you have the permission to
upload anything.
Now if you see the
current code, it lets you upload the file one at a time. And we are
changing it to upload multiple files.
current code, it lets you upload the file one at a time. And we are
changing it to upload multiple files.
I created one PHP
file called “upload_file.php” to perform upload operation.
file called “upload_file.php” to perform upload operation.
The strategy is to
give each file a specific name.
give each file a specific name.
So I shall create a
count variable, within the loop. I shall increase it by one.
count variable, within the loop. I shall increase it by one.
Then I shall create
the “POST VARIABLE NAME” called “count_of_files” and append
it in form.
the “POST VARIABLE NAME” called “count_of_files” and append
it in form.
In php code, I shall
echo it.
echo it.
Make sure to add
multiple attribute on file input type.
multiple attribute on file input type.
Now it will show me
the count of files selected for uploading.
the count of files selected for uploading.
Here we go.
Now we have to give
each file a specific name, so append count number after each file.
each file a specific name, so append count number after each file.
With that, each file
will have it’s own unique name.
will have it’s own unique name.
In PHP code, we
create a for loop, and limit it upto that variable.
create a for loop, and limit it upto that variable.
Now, we have to call
each file by its unique name. So, append variable I after each file.
each file by its unique name. So, append variable I after each file.
Lets test, we shall
select 3 files, and click on “UPLOAD”. And those files are
uploaded in folder.
select 3 files, and click on “UPLOAD”. And those files are
uploaded in folder.
The code is in the
description.
description.
Thank you for
watching, dont forget to like share and subscribe.
watching, dont forget to like share and subscribe.
No comments:
Post a Comment