If you are looking to search for drag and drop upload multiple files by using JQuery with Ajax with PHP Programming Language without refreshing of web page. For implementing this things I have not use any html file control for upload multiple files but I have use simple html divison tag with drag and drop event of Jquery. In this post we have jQuery event handlers which will be called based on any drag-drop events. When used dropped any type of image files then at that time an AJAX method will be called for execute PHP file for sending dropped images or files to the server. I have explained how to implement drag and drop multiple file upload using jQuery AJAX with php for send file to the server. In this post I have Jquery dragover, dragleave and drop event for checking drop file to division tag. After dropping file I have create one FormData() object and appending files into that FormData() object and that FormData object send to php file via Ajax request. This way dropped files has been sent to the server by using FormData via ajax request. I have not used any jquery plugin for Drag and Drop upload multiples files.
Source Code
index.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Drag and drop Multiple file upload By Ajax JQuery PHP</title>
<script src="jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.file_drag_area
{
width:600px;
height:400px;
border:2px dashed #ccc;
line-height:400px;
text-align:center;
font-size:24px;
}
.file_drag_over{
color:#000;
border-color:#000;
}
</style>
</head>
<body>
<br />
<div class="container" style="width:700px;" align="center">
<h3 class="text-center">Drag and drop file upload using JQuery Ajax and PHP</h3><br />
<div class="file_drag_area">
Drop Files Here
</div>
<div id="uploaded_file"></div>
</div>
<br />
</body>
</html>
<script>
$(document).ready(function(){
$('.file_drag_area').on('dragover', function(){
$(this).addClass('file_drag_over');
return false;
});
$('.file_drag_area').on('dragleave', function(){
$(this).removeClass('file_drag_over');
return false;
});
$('.file_drag_area').on('drop', function(e){
e.preventDefault();
$(this).removeClass('file_drag_over');
var formData = new FormData();
var files_list = e.originalEvent.dataTransfer.files;
//console.log(files_list);
for(var i=0; i<files_list.length; i++)
{
formData.append('file[]', files_list[i]);
}
//console.log(formData);
$.ajax({
url:"upload.php",
method:"POST",
data:formData,
contentType:false,
cache: false,
processData: false,
success:function(data){
$('#uploaded_file').html(data);
}
})
});
});
</script>
upload.php
<?php
//upload.php
//echo 'done';
$output = '';
if(isset($_FILES['file']['name'][0]))
{
//echo 'OK';
foreach($_FILES['file']['name'] as $keys => $values)
{
if(move_uploaded_file($_FILES['file']['tmp_name'][$keys], 'upload/' . $values))
{
$output .= '<div class=col-md-3"><img src="upload/'.$values.'" class="img-responsive" /></div>';
}
}
}
echo $output;
?>
its not working in chrome. i think dragstart function is missing can you help me with this. i could not find appropriate dragstart function for this code
ReplyDeleteNot working in Microsoft Edge also
DeleteThanks, good tutorial
ReplyDeleteGood Job!
ReplyDelete