We’ll show you how to drag-and-drop multiple file uploads using Ajax, jQuery, and PHP.
It’s a widely-used functionality in web applications. When working on a website application, you may need multiple files uploaded to your form using a single uploader.
This article will demonstrate how to upload files without refreshing pages and show thumbnails after successfully uploaded files with jQuery, Ajax, and PHP.
Let’s create a drag and drop file upload demo that will have the following user interface.
Drag and Drop Multiple File Uploads
- Create HTML form
- Add CSS
- Add jQuery script
- Write PHP code to upload files
- Output
Let’s begin with an example of how to drag and drop multiple files. The following is a project structure.
Javascript Image Compress using HTML5 Canvas & File API before Upload
Make HTML forms
First, we will create a PHP file named index.php to create a drag and drop file upload HTML UI.
index.html
<div id="ddArea">
Drag and Drop Files Here or
<a class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
Select File(s)
</a>
</div>
<div id="showThumb"></div>
<input type="file" class="d-none" id="selectfile" multiple />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>We have added a jQuery library to send Ajax requests to the PHP file file_upload.php for file upload in the directory in the above code.
Add CSS
We will add the following CSS in the index.php file before the closing head() tag for the basic UI style.
#ddArea {
height: 200px;
border: 2px dashed #ccc;
line-height: 200px;
text-align: center;
font-size: 20px;
background: #f9f9f9;
margin-bottom: 15px;
}
.drag_over {
color: #000;
border-color: #000;
}
.thumbnail {
width: 100px;
height: 100px;
padding: 2px;
margin: 2px;
border: 2px solid lightgray;
border-radius: 3px;
float: left;
}
.d-none {
display: none;
}
We will now add a script to jQuery to handle drag leave, drag over, and drop events. After dropping files, create a formData object to send via ajax request to the PHP upload.php.
Before the closing body(), tag, add the following script to index.html
$(document).ready(function() {
$("#ddArea").on("dragover", function() {
$(this).addClass("drag_over");
return false;
});
$("#ddArea").on("dragleave", function() {
$(this).removeClass("drag_over");
return false;
});
$("#ddArea").on("click", function(e) {
file_explorer();
});
$("#ddArea").on("drop", function(e) {
e.preventDefault();
$(this).removeClass("drag_over");
var formData = new FormData();
var files = e.originalEvent.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
formData.append("file[]", files[i]);
}
uploadFormData(formData);
});
function file_explorer() {
document.getElementById("selectfile").click();
document.getElementById("selectfile").onchange = function() {
files = document.getElementById("selectfile").files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append("file[]", files[i]);
}
uploadFormData(formData);
};
}
function uploadFormData(form_data) {
$(".loading")
.removeClass("d-none")
.addClass("d-block");
$.ajax({
url: "upload.php",
method: "POST",
data: form_data,
contentType: false,
cache: false,
processData: false,
success: function(data) {
$(".loading")
.removeClass("d-block")
.addClass("d-none");
$("#showThumb").append(data);
}
});
}
});
To upload files, write PHP code
Let’s make a PHP file called file_upload.php and upload files to the uploads directory. But, first, you have to create an uploads folder that has read and write permissions.
upload.php
<?php
$imageData = '';
if (isset($_FILES['file']['name'][0])) {
foreach ($_FILES['file']['name'] as $keys => $values) {
$fileName = uniqid() . '_' . $_FILES['file']['name'][$keys];
if (move_uploaded_file($_FILES['file']['tmp_name'][$keys], 'uploads/' . $fileName)) {
$imageData .= '<img src="uploads/' . $fileName . '" class="thumbnail" />';
}
}
}
echo $imageData;
Run the project and check the output in the browser.
That’s it for today.
We appreciate your time. Happy Coding ..!!
5 Comments
Sorin
September 17, 2021 at 7:06 amThanks
The main problem of that function is slowness.
A function that compresses the files before uploading will help.
Kindly sorin
Huzoor Bux
September 17, 2021 at 7:19 amHello Sorin,
Here is the article on compress images before uploading.
https://www.phplift.net/javascript-image-compress-using-html5-canvas-file-api-before-upload/
João Pedro
February 10, 2022 at 7:18 pmThanks a million!
You made my day!
sergio
December 9, 2022 at 3:20 pmThanks for tutorial.
And if I want to add button for delete image?
Best Regard – Sergio
sergio
December 9, 2022 at 3:22 pmThanks for tutorial.
And if I want add button for delete image?
Best Regards – Sergio