PHP drag and drop upload file php - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Together We Can Simplify The World
Just a Web Code Solution

drag and drop upload file using php


 220

PHP


2

<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/script.js" type="text/javascript"></script>

<style>
#DragAndDrop
{
border:3px dotted black;
width:400px;
height: 300px;
color:black;
text-align: center;
vertical-align:middle;
padding:10px 10px 10 10px;
margin-bottom:10px;
font-size:150%;
}
#child {
line-height: 300px;
}
.progressBar {
width: 200px;
height: 22px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
display:inline-block;
margin:0px 10px 5px 5px;
vertical-align:top;
text-align: center;
}

.progressBar div {
height: 100%;
color: black;
text-align: right;
line-height: 22px;
width: 0;
background-color: yellow; border-radius: 3px;
text-align: center;
}
.statusbar
{
border-top:1px solid #A9CCD1;
min-height:25px;
width:700px;
padding:10px 10px 0px 10px;
vertical-align:top;
}
.statusbar:nth-child(odd){
background:#EBEFF0;
}
.filename
{
display:inline-block;
vertical-align:top;
width:250px;
}
.filesize
{
display:inline-block;
vertical-align:top;
color:black;
width:100px;
margin-left:10px;
margin-right:5px;
}
.abort{
background-color:#A8352F;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;display:inline-block;
color:#fff;
font-family:arial;font-size:13px;font-weight:normal;
padding:4px 15px;
cursor:pointer;
vertical-align:top
}
</style>

</head>
<body>

<div id="DragAndDrop"><span id="child">Drag And Drop Files - Here</span></div>
<p></p>
<div id="upload_info"></div>

</div>
</body>
</html>

// upload.php

<?php
if(is_array($_FILES))
{
if(is_uploaded_file($_FILES['file']['tmp_name'])) {
$sourcePath = $_FILES['file']['tmp_name'];
$targetPath = "upload_files/".$_FILES['file']['name'];
if(move_uploaded_file($sourcePath,$targetPath)) {
?>

<?php
exit();
}
}
}
?>

// script.js

$(document).ready(function()
{
var myDIV = $("#DragAndDrop");
myDIV.on('dragenter', function (e)
{
e.stopPropagation();
e.preventDefault();
$(this).css('border', '2px solid orange');
});
myDIV.on('dragover', function (e)
{
e.stopPropagation();
e.preventDefault();
});
myDIV.on('drop', function (e)
{

$(this).css('border', '2px dotted orange');
e.preventDefault();
var files = e.originalEvent.dataTransfer.files;


handleFileUpload(files,myDIV);
});
$(document).on('dragenter', function (e)
{
e.stopPropagation();
e.preventDefault();
});
$(document).on('dragover', function (e)
{
e.stopPropagation();
e.preventDefault();
myDIV.css('border', '2px dotted orange');
});
$(document).on('drop', function (e)
{
e.stopPropagation();
e.preventDefault();
});

});

// *********************************************************

function SendFileToServer(formData,status)
{
var MyURL ="/upload.php"; // Your upload file
var Data_extra ={};
var jqXHR=$.ajax({
xhr: function() {
var xhrmyDIV = $.ajaxSettings.xhr();
if (xhrmyDIV.upload) {
xhrmyDIV.upload.addEventListener('progress', function(event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}

status.setProgress(percent);
}, false);
}
return xhrmyDIV;
},
url: MyURL,
type: "POST",
contentType:false,
processData: false,
cache: false,
data: formData,
success: function(data){
status.setProgress(100);

$("#upload_info").append("File successfully upload!<br>");
}
});

status.setAbort(jqXHR);
}

// *********************************************************

var rowCount=0;
function CreateStatusBar(myDIV)
{
rowCount++;
var row="odd";
if(rowCount %2 ==0) row ="even";
this.statusbar = $("<div class='statusbar "+row+"'></div>");
this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
this.size = $("<div class='filesize'></div>").appendTo(this.statusbar);
this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar);
this.abort = $("<div class='abort'>Abort</div>").appendTo(this.statusbar);
myDIV.after(this.statusbar);

this.setFileNameSize = function(name,size)
{
var sizeStr="";
var sizeKB = size/1024;
if(parseInt(sizeKB) > 1024)
{
var sizeMB = sizeKB/1024;
sizeStr = sizeMB.toFixed(2)+" MB";
}
else
{
sizeStr = sizeKB.toFixed(2)+" KB";
}

this.filename.html(name);
this.size.html(sizeStr);
}
this.setProgress = function(progress)
{
var progressBarWidth =progress*this.progressBar.width()/ 100;
this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "% ");
if(parseInt(progress) >= 100)
{
this.abort.hide();
}
}
this.setAbort = function(jqxhr)
{
var sb = this.statusbar;
this.abort.click(function()
{
jqxhr.abort();
sb.hide();
});
}
}

// *********************************************************

function handleFileUpload(files,myDIV)
{
for (var i = 0; i < files.length; i++)
{
var fd = new FormData();
fd.append('file', files[i]);

var status = new CreateStatusBar(myDIV);
status.setFileNameSize(files[i].name,files[i].size);
SendFileToServer(fd,status);

}
}


By     Created   
The power of the user (%)
11%



The most helpful PHP solutions

detect browser phpdetect browser phpPHP

Click to see more ...

  2.4K     376

create QR code phpcreate QR code phpPHP

Click to see more ...

  1.8K     269

create relative date phpcreate relative date phpPHP

Click to see more ...

  1.3K     216

detect ie phpdetect ie phpPHP

Click to see more ...

  661     209

get current url phpget current url phpPHP

Click to see more ...

  528     189

Get real client country using php ?Get real client country using php ?PHP

Click to see more ...

  425     169

get meta tag phpget meta tag phpPHP

Click to see more ...

  349     129

detect speed internet phpdetect speed internet phpPHP

Click to see more ...

  320     105

How can I create an object using php ?How can I create an object using php ?PHP

Click to see more ...

  314     104

How to connect to MySQL database using PHP ?How to connect to MySQL database using PHP ?PHP

Click to see more ...

  157     72

Hi net-rafter,
create the complete solutions that will be
used by the developers from all around the world.

join us - click to create your account