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

Popular posts from this blog

Using javascript pass form variables to iframe src

Image
   Open PDF in Bootstrap Modal Window   This tutorial shows How to pass a JavaScript/jQuery variable to bootstrap modal view and sets it to iframe  src attribute. It passes value dynamically to src attribute of the iframe. When the user clicks a link, it opens the URL in a popup window. This  code shows the PDF in a Model without download option by hiding the toolbar.  To show PDF toolbar in modal, just add #toolbar=1   in the above script. index.php <!DOCTYPE html> <html lang= "en" > <head> <title>Bootstrap Model with PDF Example - coding-zon</title> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" > <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim....
Read more

Shoppingcart using PHP Sessions - Miniproject

Image
Shopping cart using PHP Sessions, MySQL In this tutorial, you are going to learn how to build a simple shopping cart project using PHP and MySQL. It is a basic project aimed for beginners . This project uses PHP Session to implement shopping cart. Within the session, a cart is created. Sessions allows you managing the products in the cart. Such as… adding product to the cart,  modifying the product quantity,  deleting the product finding the total number of products in the cart. etc.   Download source code from the given link: Note: Scan the code with antivirus and use it. Download Here are steps to accomplish the project. Just follow them. STEP-1   Create a project in a server. Create an image's folder inside the project folder. As given in the picture. Copy some sample products images in that. GO TOP↑   STEP-2: Start server. Open PhpMyAdmin tool in a browser, Create a database, with name shoppingcartdb. Create Table. And insert Data using the given queri...
Read more

Export Data to Excel with PHP and MySQL

Image
How to Export Data to Excel using PHP and MySQL This tutorial demonstrates you how to export MySQL table data to Excel spreadsheet, when a user clicks a button on a webpage. You can achieve this using PHP, MySQL. For this, create the files specified in the below, in some folder in Apache server.   php2excel-tbl .php export.php    Now run the first file in the web server. When button clicked, export.php will be executed at backend and generates the Excel file. php2excel-tbl.php     <?php /*******EDIT DB Details *******/ $DB_Server = "localhost" ; //MySQL Server $DB_Username = "root" ; //MySQL Username $DB_Password = "" ; //MySQL Password $DB_DBName = "usersdb" ; //MySQL Database Name $DB_TBLName = "users" ; //MySQL Table Name $filename = "excel-users-list" ; //File Name /*******YOU DO NOT NEED TO EDIT ANYTHING BELOW THIS LINE*******/   //create MySQL connection...
Read more