Uploading Multiple Files in PHP

 

 

 

 

How to Upload multiple files and store in a folder and array

 

 

 

Sometimes we need to upload more than one file at a time. This  tutorial helps  you how to upload many files and store them in  a folder and get their names stored in the PHP array. In this example,  there are two files. Create a folder in the server and copy the files given  below. Open index.php and check the result.

 

  • index.php

  • upload.php 

 

index.php : Contains front-end code(form for uploading files) and allows user to upload more than one file at a time. User selects multiple files, and clicks on submit button.

 

upload.php: will receives the files and stores them in a folder and also in an array. Next, using for loop, it prints the names of the uploaded files and the preview of the images.


Folder structure:

 
codin-zon-folder-structure-multiple-files-upload

 

 

index.php

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="style.css">
<title>Download files</title>
<style>

input[type="file"] {
display: none !important;
}
.btn-info{    
width:100%;    
font-size: 22px;
font-weight: bold;}
.navbar-brand img{width:80%;}
.fds label, .fds label img{width:100%;cursor:pointer;}
.fds{  background: #f6f6f6;
border-top: 5px solid #59eaff;}

.custom-text{font-size:16px;display:none;}
@media only screen and (max-width:767px){

.header-text h1 {
font-size: 20px;
font-weight: bold;
color: #03828a;
}
.fds{padding:5px;width:100%;}
#myform {
margin-left: 0px;
margin-right: 0px;
}
}

</style>
</head>
<body>


<section>


<div class="container">

<div class="row">

<div class="col-md-12"> 
 
<div class="col-md-2"> 
</div>
 
<div class="col-md-8"> 

<h2 align="text-center"> Upload multiple Files</h2>
 
<fieldset class="fds">
 
<form action="upload.php" name="myform" id="myform" method="post" enctype="multipart/form-data">
	<center><p class="custom-text">You have selected <span class="file-count">0</span> files</p></center>
	
	<label for="file"><img src="images/file-upload.jpg" alt="file-upload"></label> 
	<input type="file" name="files[]" id="file" multiple accept="image/png, image/jpeg,image/jpg,application/pdf" required/>
	
	<input type="submit" name="submit" id="submit" value="SUBMIT" class="btn btn-info chek  mt-auto "/>
	
</form>
</fieldset>
</div>


</div>


</section>
<script>
$(document).ready(function(){
$("input#file").change(function(){
var files = $(this)[0].files;
if(files.length > 0){
$(".file-count").text(files.length);
$(".file-count").css("font-weight","bold");
$(".file-count").css("color","red");
$(".custom-text").css("display","block");
}
});


$("#submit").click(function(){

$(".custom-text").text("Please Wait....");
$(".custom-text").css("color","red"); 
setTimeout(function () {
$(".custom-text").text("");

}, 2000);

});

});
</script>	


</body>
</html>

 

upload.php

 
<?php
 
$fullpath ="";

$images = array();
 
if (!empty($_POST)) {

$number_of_files = count($_FILES['files']['name']);

if($number_of_files>0){

$target_path   ="uploads/";
 
$images = array();

$filesCount = count($_FILES['files']['name']);

// Looping all files
 
 
for($i=0;$i<$filesCount;$i++){ 
 
$filename = $_FILES['files']['name'][$i];
	
	// Upload file
move_uploaded_file($_FILES['files']['tmp_name'][$i],'uploads/'.$filename);
array_push($images, $filename); 
 
} 
 
} 
 
}


foreach($images as $i ){

echo $i."<br>";

?>

<img src="uploads\<?php echo $i ;  ?>" />

<?php

}

?>
 
 
 

 
 Download
 
 
 
 Demo
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 








Comments

Post a Comment