✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Drag And Drop Image Upload Using jQuery Ajax And PHP

Last Updated : Jul 1, 2023

IN - jQuery Ajax PHP | Written & Updated By - Dikshita

In this tutorial we will show you how to upload images by drag and drop using jQuery Ajax and PHP, Drag and Drop Image Upload is a new process for uploading image or any file by simply dragging the file from your directory and drop to the upload form.

You may also like Upload Image Without Page Refresh Using Ajax,jQuery And PHP

Drag And Drop Image Upload Using jQuery Ajax And PHP

To Drag And Drop Image Upload It Takes Only Four Steps:-

  1. Make a HTML file and define markup
  2. Make a js file for drag and drop feature
  3. Make a PHP file to upload image
  4. Make a CSS file and define styling

Step 1. Make a HTML file and define markup

We make a HTML file and save it with a name upload.html 

<html>
<head>
<link rel="stylesheet" type="text/css" href="upload_style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upload_script.js"></script>
</head>
<body>
<div id="wrapper">
 <input type="file">
 <div id="drop-area">
  <h3 class="drop-text">Drag and Drop Images Here</h3>
 </div>
</div>
</body>
</html>

In this step we create a file element to drag and drop image you can also drag and drop the images without using file element and then we made a div called drop-area this is the area where user drop their image to upload and we insert jQuery file and our upload_script file and css file which we were going to create in next steps.

You may also like File Upload Progress Bar Using jQuery And PHP

Step 2. Make a js file for drag and drop feature

We make a js file and save it with a name upload_script.js 

$(document).ready(function()
{
 $("#drop-area").on('dragenter', function (e){
  e.preventDefault();
  $(this).css('background', '#BBD5B8');
 });

 $("#drop-area").on('dragover', function (e){
  e.preventDefault();
 });

 $("#drop-area").on('drop', function (e){
  $(this).css('background', '#D8F9D3');
  e.preventDefault();
  var image = e.originalEvent.dataTransfer.files;
  createFormData(image);
 });
});

function createFormData(image)
{
 var formImage = new FormData();
 formImage.append('userImage', image[0]);
 uploadFormData(formImage);
}

function uploadFormData(formData) 
{
 $.ajax({
 url: "upload_image.php",
 type: "POST",
 data: formData,
 contentType:false,
 cache: false,
 processData: false,
 success: function(data){
  $('#drop-area').html(data);
 }});
}

In this step we use document.ready function to start drag and drop code as soon as page load.

In this code we use 'dragenter' to change the color whenever user drag any image to drag area and we use 'drop' to get image in image variable and call createFormData() function whenever user drop the image in drop area.

In createFormData() function we create FormData object and call uploadFormData() function.In uploadFormData() function we use ajax to upload the image.

You may also like drag and dop shopping cart using jQuery and PHP.

Step 3. Make a PHP file to upload image

We make a PHP file and save it with a name upload_image.php 

<?php
if(is_array($_FILES)) 
{
 if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
  $sourcePath = $_FILES['userImage']['tmp_name'];
  $targetPath = "images/".$_FILES['userImage']['name'];
  if(move_uploaded_file($sourcePath,$targetPath)) {
  ?>
   <img src="<?php echo $targetPath; ?>">
   <?php
   exit();
  }
 }
}
?>

In this step we simple get the image and uploaded it to the directory and display the image.

You may also like Upload Image to Database and Server using HTML,PHP and MySQL

Step 4. Make a CSS file and define styling

We make a CSS file and save it with a name upload_style.css 

body
{
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#084B8A;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
}
#drop-area
{
 margin-top:20px;
 margin-left:220px;
 width:550px;
 height:200px;
 background-color:white;
 border:3px dashed grey;
}
.drop-text
{
 margin-top:70px;
 color:grey;
 font-size:25px;
 font-weight:bold;
}
#drop-area img
{
 max-width:200px;
}

Thats all, this is how to Upload Image By Drag And Drop Using jQuery Ajax and PHP. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on drag and drop image upload helps you and the steps and method mentioned above are easy to follow and implement.