Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Drag And Drop Image Upload Using jQuery Ajax And PHP

Thursday, Sep 28, 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

<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.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.