Home » How to upload multiple files in php with add and remove options? – Jquery
How to Php

How to upload multiple files in php with add and remove options? – Jquery

In this tutorial, I will show you how to upload multiple files in PHP with add and remove/delete options using PHP, javascript, and jquery. I have generated my personal PHP script. Script is very easy to understand and setup is also easy for any developers or users. You just need to follow the steps below.

Almost all the clients want they can upload multiple files or images. Because one by one upload is very time consuming and not user-friendly. When I make any project for my clients, they always don’t like the single file upload option. Even more, they want to add and remove options also.

Finally, I made one script which satisfies all the requirements. So, all developers must have to use it to make a user-friendly interface. First of all, view this demo so you can get the idea about the tutorial and script.

View Demo

Rather I have fixed the add and delete/remove options also for multiple files upload in PHP. Project code download link and demo link is at the bottom of the tutorial. Let’s start the tutorial.

This tutorial is divided into six parts:

1) Make “uploads” folder
2) PHP Code
3) HTML code
4) Javascript and Jquery Code
5) Full Project Code
6) Conclusion

Follow the steps for upload multiple files in php with add and remove options using php and jquery

Upload multiple files in php

1) Create one “index.php” file and make one folder named “uploads” in your server

First of all, you need to create one file name “index.php” and create one folder name “uploads”.
Uploads folder is used for store all the uploaded files or images.

2) PHP code

Here is the PHP code. First of all, it checks the file size. When your file is more than 1MB then it will reject the file and give an error message. Then it will store the files in the uploads folder and give the success message to the user.


<?php
   ini_set("error_reporting", 1);
   if(isset($_POST['btnSubmit']))
   {
	for ($i = 0; $i < count($_FILES['files']['name']); $i++)
	{
	   if ($_FILES["files"]["size"][$i] < 1000000) // Check File size (Allow 1MB)
	   {
	 	$temp = $_FILES["files"]["tmp_name"][$i];
		$name = $_FILES["files"]["name"][$i];
		if(empty($temp))
		{
			break;
		}
		if($i == 0){ $err = "File uploaded successfully"; $cls = "success"; }
		move_uploaded_file($temp,"img/".$name);
	   }
	   else
	   {
		$err = "File size is more than 1MB";
		$cls = "danger";
	   }
	}
   }
?>

3) HTML Code

HTML code it includes the upload file button with add and removes buttons also. I have made the table structure for making a demo. When the user clicks the “Add New File” button then one new row will append with a delete option. If the user wants to delete the files then he/she can easily delete selected files by click delete button.


<form method='post' enctype='multipart/form-data'>
     <table id="table" width="50%">
     <thead>
	<tr class="text-center">
	   <th colspan="3" style="height:50px;">Mutiple File Upload Script</th>	
	</tr>
      </thead>
      <tbody>
	<tr class="add_row">
	  <td id="no" width="5%">#</td>
	  <td width="75%"><input class="file" name='files[]' type='file' multiple /></td>
	  <td width="20%"></td>
	</tr>
      </tbody>
      <tfoot>
	<tr>
	  <td colspan="4">
          <button class="btn btn-success btn-sm" type="button" id="add" title='Add new file'/>Add new file</button>
          </td>
	</tr>
	<tr class="last_row">
	  <td colspan="4" style="text-align:center;">
            <button class="btn btn-primary submit" name="btnSubmit" type='submit'>Upload</button>
          </td>
	</tr>
       </tfoot>
     </table>
</form>
<br>
<!-- For success/error message -->
<h2 class="<?php echo $cls; ?>"><?php echo $err; ?></h2>
</center>

4) Javascript and Jquery Code

This is the core part of the tutorial. It makes multiple files/images upload easily and super fast. It is used to add new rows and delete rows with simple button clicks.


<script>
$(document).ready(function(){
   // Validation
   $('.submit').click(function(){
	var file_val = $('.file').val();
	if(file_val == "")
	{
 	   alert("Please select at least one file.");
	   return false;
	}
	else{
	   $('form').attr('action', 'index.php');
	}
    });
			
   // Append/Add new row
   $('#table').on('click', "#add", function(e) {
	$('tbody').append('<tr class="add_row"><td>#</td><td><input name="files[]" 
        type="file" multiple /></td><td class="text-center"><button type="button" 
        class="btn btn-danger btn-sm" id="delete" title="Delete file">Delete file</button>
        </td><tr>');
	e.preventDefault();
   });
			
   // Delete row
   $('#table').on('click', "#delete", function(e) {
	if (!confirm("Are you sure you want to delete this file?"))
	return false;
	$(this).closest('tr').remove();
	e.preventDefault();
   });
});
</script>

5) Full Project Code in one Snippet – Copy the below code and paste in “index.php”

The final step is just copy the below code and paste it in your “index.php” file


<?php
   ini_set("error_reporting", 1);
   if(isset($_POST['btnSubmit']))
   {
	for ($i = 0; $i < count($_FILES['files']['name']); $i++)
	{
	   if ($_FILES["files"]["size"][$i] < 1000000) // Check File size (Allow 1MB)
	   {
	 	$temp = $_FILES["files"]["tmp_name"][$i];
		$name = $_FILES["files"]["name"][$i];
		if(empty($temp))
		{
			break;
		}
		if($i == 0){ $err = "File uploaded successfully"; $cls = "success"; }
		move_uploaded_file($temp,"img/".$name);
	   }
	   else
	   {
		$err = "File size is more than 1MB";
		$cls = "danger";
	   }
	}
   }
?>
<html>
<head>
   <style>
	body{ font-family:sans-serif; }
	table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
	}
	.success{ color: green;}
	.danger{ color: red;}
   </style>
</head>
<body>
<center>
   <form method='post' enctype='multipart/form-data'>
	<table id="table" width="50%">
	<thead>
	     <tr class="text-center">
	        <th colspan="3" style="height:50px;">Mutiple File Upload Script</th>	
	     </tr>
        </thead>
	<tbody>
	     <tr class="add_row">
		<td id="no" width="5%">#</td>
		<td width="75%"><input class="file" name='files[]' type='file' multiple /></td>
		<td width="20%"></td>
	     </tr>
	</tbody>
	<tfoot>
	     <tr>
		<td colspan="4">
                <button class="btn btn-success btn-sm" type="button" id="add" title='Add new file'/>Add new file</button>
                </td>
	     </tr>
	     <tr class="last_row">
		<td colspan="4" style="text-align:center;">
                <button class="btn btn-primary submit" name="btnSubmit" type='submit'>Upload</button>
                </td>
	     </tr>
	 </tfoot>	
	 </table>
   </form>
<br><br><br><br>
<h2 class="<?php echo $cls; ?>"><?php echo $err; ?></h2>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   // Validation
   $('.submit').click(function(){
	var file_val = $('.file').val();
	if(file_val == "")
	{
 	   alert("Please select at least one file.");
	   return false;
	}
	else{
	   $('form').attr('action', 'index.php');
	}
    });
			
   // Append new row
   $('#table').on('click', "#add", function(e) {
	$('tbody').append('<tr class="add_row"><td>#</td><td><input name="files[]" type="file" multiple /></td><td class="text-center"><button type="button" class="btn btn-danger btn-sm" id="delete" title="Delete file">Delete file</button></td><tr>');
	e.preventDefault();
   });
			
   // Delete row
   $('#table').on('click', "#delete", function(e) {
	if (!confirm("Are you sure you want to delete this file?"))
	return false;
	$(this).closest('tr').remove();
	e.preventDefault();
   });
});
</script>
</body>
</html>

Whole code is created by me and I have used the jquery also for add new files and remove/delete selected files.
That’s it you can now execute the code and upload multiple files in PHP with add and remove/delete options using PHP, javascript, and jquery.
Download the code and see the demo by click below buttons.
Download Script   View Demo

6) Conclusion

Above all, steps are used to create multiple file/image upload script. As a result, you can place a code in your project and make it awesome. Another advantage is you can upload multiple files for multiple table rows. When you delete one row then it will delete that particular row files. Other files remain as it is.

Must have to view my other posts also:

About the author

John Patel

John Patel is an experienced blogger and web developer. He always likes to learn something new. He is helping the new developers through Web development and SEO(Search Engine Optimization) tutorials, tips and tricks articles.

5 Comments

Click here to post a comment

  • Wow! After all, I got a blog from where I be
    capable of actually get valuable information regarding my study and
    knowledge.

  • I was excited to uncover this site. I need to to thank you for ones time for this, particularly wonderful read!! I definitely enjoyed every part of it and I have you saved as a favorite to see new things on your site.

  • I loved your information! I visit your blog on a regular basis and have shared with my facebook followers and they really like the posts.
    Keep up the awesome posts.

SUBSCRIBE TO JOIN US

Join as a subscriber and get notifications of our latest articles,tutorials & tips/tricks directly to your inbox. For Free.
%d bloggers like this: