Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Drag And Drop Image Upload Using jQuery Ajax And PHP

Saturday, Apr 8, 2017

Tags:- jQuery Ajax 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.In this tutorial we will show you how to upload images by drag and drop using jQuery Ajax and PHP.You may also like Upload Image Without Page Refresh Using Ajax,jQuery And PHP

jQuery Drag and Drop Image Upload

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

<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>
<div id="wrapper">
 <input type="file">
 <div id="drop-area">
  <h3 class="drop-text">Drag and Drop Images Here</h3>

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

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

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

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

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

function uploadFormData(formData) 
 url: "upload_image.php",
 type: "POST",
 data: formData,
 cache: false,
 processData: false,
 success: function(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

 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; ?>">

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

 margin:0 auto;
 margin:0 auto;
 border:3px dashed grey;
#drop-area img

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.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH