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


 301

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

  3.2K     383

create QR code phpcreate QR code phpPHP

Click to see more ...

  2.1K     273

delete array item phpdelete array item phpPHP

Click to see more ...

  1.7K     229

create relative date phpcreate relative date phpPHP

Click to see more ...

  1.4K     215

detect ie phpdetect ie phpPHP

Click to see more ...

  1K     209

get current url phpget current url phpPHP

Click to see more ...

  615     188

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

Click to see more ...

  517     168

get meta tag phpget meta tag phpPHP

Click to see more ...

  433     128

detect speed internet phpdetect speed internet phpPHP

Click to see more ...

  410     106

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

Click to see more ...

  380     103