You can allow multiple file selections by creating more than one file element but you can easily do this with just a single file element.
It consumes less space and easy to handle but for this, you need to customize the element.
In this tutorial, I am using AngularJS and PHP to upload multiple files to the servers.
I am creating a custom directive to handle file selection in AngularJS.
Contents
1. HTML
For enabling multiple files selection add multiple
attribute on the type='file'
element and also define ng-file='uploadfiles'
directive.
To upload the file on a button click define ng-click='upload()'
directive.
The <p>
is only used to display the response data after the successful upload.
Completed Code
<body ng-app='myapp'> <div ng-controller="userCtrl"> <input type='file' multiple ng-file='uploadfiles'><br/> <input type='button' value='Upload' id='upload' ng-click='upload()' > <p>{{ response.name }}</p> </div> </body>
2. PHP
Create a new upload.php
file and a upload
folder for storing files.
Find the total number of selected files by counting $_FILES
array. Loop on each file for upload and initialize $filename_arr
with the file name.
Completed Code
<?php /* Location */ $location = 'upload/'; // Count total files $countfiles = count($_FILES['file']['name']); $filename_arr = array(); // Looping all files for ( $i = 0;$i < $countfiles;$i++ ){ $filename = $_FILES['file']['name'][$i]; // Upload file if(move_uploaded_file($_FILES['file']['tmp_name'][$i],$location.$filename)){ $filename_arr[] = $filename; } } $arr = array('name' => $filename_arr); echo json_encode($arr);
3. AngularJS
Create a custom controller using .directive
to handle files and initialize FormData
object. Send a $http
request where pass the FormData
object for uploading.
Completed Code
var upload = angular.module('myapp', []); upload.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(); }); } }; }]); upload.controller('userCtrl', ['$scope', '$http', function ($scope, $http) { $scope.upload = function(){ var fd = new FormData(); angular.forEach($scope.uploadfiles,function(file){ fd.append('file[]',file); }); $http({ method: 'post', url: 'upload.php', data: fd, headers: {'Content-Type': undefined}, }).then(function successCallback(response) { // Store response data $scope.response = response.data; }); } }]);
4. Conclusion
While enabling multiple files selection make sure to add multiple
attribute on the file
element and use FormData
object to pass the file through $http
service request.
You can view this tutorial to know single file upload with AngularJS and PHP.
If you found this tutorial helpful then don't forget to share.
this information helped me, thank you very much
greetings from Ecuador
Thanks.
Oh man!
Thank you so much, it is an easy way to do it.
Best regards.