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

Recently viewed list in PHP Mysql

Image
 Recently viewed list in PHP MySQL        Learn How to show recently viewed products list in a PHP website using MySQL Database . In the previous tutorial, you learn how to get the last five product IDs in an array. In this tutorial, we use MySQL to get the details of each product from recently viewed, and display them in the bottom of the product details page. Here we're using two files, one is bookdetails.php and another is recentlyviewed.php. In Bookdetails.php bookid is added to a session array 'lastviewed' every time when user clicks on some book. bookdetails.php <?php @ session_start (); include "connect.php" ; //check if //A) a bookid has been submitted //B) the submitted value is numeric $auth = "" ; if ( isset ( $_GET [ 'bid' ])){ //clean it up if (! is_numeric ( $_GET [ 'bid' ])){ //Non numeric value entered. Someone tampered with the catid $error = true ; $errormsg = " Security, Serious error. Contact webmast...
Read more

Import CSV File Into MySQL Using PHP

Image
 Learn How to Import CSV File into MySQL Database Using PHP     This article shows you how to import an uploaded CSV file into MySQL using PHP. index.php file having a form code to upload a CSV file. Once the file uploaded successfully, PHP opens it and reads the line from CSV. Each line of data separated into php variables and then inserted into MySQL table. This process continues until the last line of the CSV. Once it is finished inserting, It displays a message – " Data Inserted in database" And finally closes CSV file. In case any error in uploading, it shows "the file type not allowed" message. PHP Version 5.5.11 1. Create a table with given code in a Database. Query: CREATE TABLE IF NOT EXISTS `items` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 100 ) DEFAULT NULL , `description` varchar ( 100 ) DEFAULT NULL , PRIMARY KEY ( `id` ) ) ;   2. Create a following file with you database details and include it in a index.ph...
Read more

Create Recently Viewed list, PHP Array

Image
How to show a list of recently viewed products in PHP Mostly when you are visiting ecommerce websites, you will see a short browsing history of recently view products. This list allows the user to visit back again more easily to a product page they have just seen or add it to a wishlist or as a reminder. So that they don’t forget about something which may have interested them. In this tutorial, you will learn how to display the last 5 products viewed , by storing the product ID from the product details page in an array within the session. Steps: Here are some steps that we need to follow to achieve… • Add the clicked product's ID to an array when the product detail page is visited by a user. • Store up to 5 product IDs in the array. • Skip the same product being added to the array twice. • Show the collected product IDs in an array. Step 1: Adding the product ID to an array. At the top of the product detail page, create a session, and set the value. Here, we used 'recentlyviewe...
Read more