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

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




Just a Web Code Solution

drag and drop upload file using php


 504

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 (%)
12%



The most helpful PHP solutions

detect browser phpdetect browser phpPHP

Click to see more ...

  3.5K     387

create QR code phpcreate QR code phpPHP

Click to see more ...

  2.2K     274

delete array item phpdelete array item phpPHP

Click to see more ...

  1.8K     231

create relative date phpcreate relative date phpPHP

Click to see more ...

  1.4K     216

detect ie phpdetect ie phpPHP

Click to see more ...

  1.1K     209

get current url phpget current url phpPHP

Click to see more ...

  684     188

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

Click to see more ...

  587     168

get meta tag phpget meta tag phpPHP

Click to see more ...

  513     128

detect speed internet phpdetect speed internet phpPHP

Click to see more ...

  501     106

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

Click to see more ...

  462     103