Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





How to Drag and Drop Image Upload in jquery?

Drag and Drop Image Upload

In this tutorial, we are going to upload image files by drag and drop from source to destination. In this tutorial we are having jQuery event handlers which will be triggered based on the drag-drop events. On dropping image files, an AJAX request will be called for a PHP file for uploading dropped images.

File name : index.php

<html>
<head>
<title>jQuery Drag and Drop Image Upload</title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<style>
body{width:610px;}
#drop-area{background: #D8F9D3;min-height:200px;padding:10px;}
h3.drop-text{color:#999;text-align:center;font-size:2em;}
</style>
<script>
$(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.php",
type: "POST",
data: formData,
contentType:false,
cache: false,
processData: false,
success: function(data){
$('#drop-area').append(data);
}
});
}
</script>
</head>
<body>
<div id="drop-area"><h3 class="drop-text">Drag and Drop Images Here</h3></div>
</body>
</html>

File name : upload.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; ?>" width="100px" height="100px" hspace=15 />
<?php
}
}
}
?>

Output :-

Drag and Drop Image Upload

Download Drag and Drop Image Upload zip files






Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link