Drag and drop multiple file upload using jQuery, Ajax, and PHP

by Clue Mediator · January 3, 2021

Today we’ll explain to you how to drag and drop multiple file upload using jQuery, Ajax, and PHP.

It is a common functionality widely used in web applications. You may need to upload multiple files to your form with a single uploader when working on a web application.

In this article, we will show you how to upload one or more files without refreshing the page and show thumbnails when files are successfully uploaded using jQuery, Ajax, and PHP.

Let’s create a drag and drop file upload demo that will have the following user interface.

Let’s start with an example to upload multiple files with drag and drop feature. Refer to the following project structure.

File Structure

drag-drop-multiple-files
- uploads
- db_config.php
- file_upload.php
- index.php

1. Create HTML form

First of all, we will create a PHP file named index.php to create a drag and drop file upload HTML UI.

index.php

<!DOCTYPE html>
<html>

<head>
  <title>Drag and drop Multiple file upload using Ajax JQuery PHP - Clue Mediator</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div class="container">
    <h3>Drag and drop multiple file upload using jQuery, Ajax and PHP - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3><br />
    <div id="drop_file_area">
      Drag and Drop Files Here
    </div>
    <div id="uploaded_file"></div>
  </div>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Drag and drop Multiple file upload using Ajax JQuery PHP - Clue Mediator</title>

</head>

<body>

<h3>Drag and drop multiple file upload using jQuery, Ajax and PHP - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3><br />

Drag and Drop Files Here

</div>

</div>

</body>

</html>

In the above code, we have added a jQuery library to send Ajax requests to the PHP file file_upload.php for file upload in the directory.

2. Add CSS

Now, we will add the following CSS in the index.php file before the closing head (</head>) tag for the basic UI style.

<style>
  h3 {
    line-height: 30px;
    text-align: center;
  }

  #drop_file_area {
    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;
  }

  #upload_file {
    display: none;
  }
</style>

<style>

h3 {

line-height: 30px;

text-align: center;

}

#drop_file_area {

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;

}

#upload_file {

display: none;

}

</style>

3. Add jQuery script

Now, we need to add a jQuery script to handle drop, dragover and dragleave events. After dropping files, we will create a formData object and send it to the PHP file file_upload.php via ajax request.

Add the following script in the index.php file before the closing body (</body>) tag.

<script>
  $(document).ready(function () {
    $("html").on("dragover", function (e) {
      e.preventDefault();
      e.stopPropagation();
    });

    $("html").on("drop", function (e) {
      e.preventDefault();
      e.stopPropagation();
    });

    $('#drop_file_area').on('dragover', function () {
      $(this).addClass('drag_over');
      return false;
    });

    $('#drop_file_area').on('dragleave', function () {
      $(this).removeClass('drag_over');
      return false;
    });

    $('#drop_file_area').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 uploadFormData(form_data) {
      $.ajax({
        url: "file_upload.php",
        method: "POST",
        data: form_data,
        contentType: false,
        cache: false,
        processData: false,
        success: function (data) {
          $('#uploaded_file').append(data);
        }
      });
    }
  });
</script>

$(document).ready(function () {

$("html").on("dragover", function (e) {

e.preventDefault();

e.stopPropagation();

});

$("html").on("drop", function (e) {

e.preventDefault();

e.stopPropagation();

});

$('#drop_file_area').on('dragover', function () {

$(this).addClass('drag_over');

return false;

});

$('#drop_file_area').on('dragleave', function () {

$(this).removeClass('drag_over');

return false;

});

$('#drop_file_area').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 uploadFormData(form_data) {

$.ajax({

url: "file_upload.php",

method: "POST",

data: form_data,

contentType: false,

cache: false,

processData: false,

success: function (data) {

$('#uploaded_file').append(data);

}

});

}

});

</script>

4. Write PHP code to upload files

To upload files in the directory and save data in MySQL, we need to follow the below steps.

Create database
Database connection
PHP code to upload files

Create database
First, we have to create a uploads table in the database. Run the following SQL query to create a table.
CREATE TABLE uploads( id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, file_name varchar(255) NOT NULL, upload_time varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
1
2
3
4
5
CREATE TABLE uploads(
id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
file_name varchar(255) NOT NULL,
upload_time varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
Database connection
We have to create a file for database connection named db_config.php.
db_config.php
<?php $dbhost = "localhost"; $dbuser = "root"; $dbpass = ""; $db = "demo"; $con = mysqli_connect($dbhost, $dbuser, $dbpass , $db) or die($con); ?>
1
2
3
4
5
6
7
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$db = "demo";
$con = mysqli_connect($dbhost, $dbuser, $dbpass , $db) or die($con);
?>

PHP code to upload files

Let’s create a PHP file named file_upload.php to upload files in the uploads directory and save the file name in the database table. Make sure you have created an uploads folder with read and write permissions.

file_upload.php

<?php
// Include the database connection file
include('db_config.php');
$fileData = '';
if(isset($_FILES['file']['name'][0]))
{
  foreach($_FILES['file']['name'] as $keys => $values)
  {
    $fileName = $_FILES['file']['name'][$keys];
    if(move_uploaded_file($_FILES['file']['tmp_name'][$keys], 'uploads/' . $values))
    {
      $fileData .= '<img src="uploads/'.$values.'" class="thumbnail" />';
      $query = "INSERT INTO uploads (file_name, upload_time)VALUES('".$fileName."','".date("Y-m-d H:i:s")."')";
      mysqli_query($con, $query);
    }
  }
}
echo $fileData;
?>

<?php

// Include the database connection file

include('db_config.php');

$fileData = '';

if(isset($_FILES['file']['name'][0]))

{

foreach($_FILES['file']['name'] as $keys => $values)

{

$fileName = $_FILES['file']['name'][$keys];

if(move_uploaded_file($_FILES['file']['tmp_name'][$keys], 'uploads/' . $values))

{

$fileData .= '<img src="uploads/'.$values.'" class="thumbnail" />';

$query = "INSERT INTO uploads (file_name, upload_time)VALUES('".$fileName."','".date("Y-m-d H:i:s")."')";

mysqli_query($con, $query);

}

echo $fileData;

5. Output

Run the project and check the output in the browser. You will also see the entry of the image file’s name in the database table.

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

Github Repository

If you found value in this article,
you can support us by buying me a coffee! ☕

Drag and drop multiple file upload using jQuery, Ajax, and PHP

Drag and drop multiple file upload

File Structure

1. Create HTML form

2. Add CSS

3. Add jQuery script

4. Write PHP code to upload files

5. Output

Demo & Source Code

You may also like...

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Join us

Drag and drop multiple file upload using jQuery, Ajax, and PHP

Drag and drop multiple file upload

File Structure

1. Create HTML form

2. Add CSS

3. Add jQuery script

4. Write PHP code to upload files

5. Output

Demo & Source Code

You may also like...

Delete files older than x days or after x amount of time in PHP

How to get select2 multiple selected values and text

Consume a REST API in PHP

How to Copy a File from/to a Remote Server using Command Line

How to convert Camel Case to Snake Case in PHP

How to Get the Key of the Max Value in an Array in PHP

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Tags

Join us