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. The 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 that 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 an idea about the tutorial and script.
Rather I have fixed the add and delete/remove options also for multiple files upload in PHP. The 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
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 to 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> <!-- 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> <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 the 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 the 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:
- How to convert HTML to pdf in PHP?
- How to change content and URL without refreshing page using ajax – jquery – php
I hope you will like this tutorial and enjoyed it. If you have any questions then please comment below your question or contact me by contact us form. Please share this post with your friends.
