JQUERY drag and drop upload file jquery - 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 jquery


 349

JQUERY


2

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

<style>
#DragAndDrop
{
border:3px dotted black;
width:400px;
color:black;
text-align:left;vertical-align:middle;
padding:10px 10px 10 10px;
margin-bottom:10px;
font-size:150%;
}
.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">Drag And Drop Files - Here</div>
<p></p>
<div id="upload_info"></div>

<script>

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

$(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 ="http://localhost:49782/"; // Your upload url
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);

}
}

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

</script>

</body>
</html>


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



The most helpful JQUERY solutions

plugin get client ip address using jqueryplugin get client ip address using jqueryJQUERY

Click to see more ...

  5.4K     1.3K

How to get client machine name or computer name with jquery?How to get client machine name or computer name with jquery?JQUERY

Click to see more ...

  4.5K     724

plugin detect country jqueryplugin detect country jqueryJQUERY

Click to see more ...

  2.1K     562

show position on google map jqueryshow position on google map jqueryJQUERY

Click to see more ...

  1.6K     386

cookie jquerycookie jqueryJQUERY

Click to see more ...

  1.9K     381

How to detect the version of IE browser using jquery ?How to detect the version of IE browser using jquery ?JQUERY

Click to see more ...

  1.1K     310

plugin convert thousands to K jqueryplugin convert thousands to K jqueryJQUERY

Click to see more ...

  850     258

How to get top, right, left, bottom position of element div using jquery ?How to get top, right, left, bottom position of element div using jquery ?JQUERY

Click to see more ...

  558     206

how to create a jquery plugin for converting date to days ago, month ago and year ago ?how to create a jquery plugin for converting date to days ago, month ago and year ago ?JQUERY

Click to see more ...

  559     199

how to get ip address using jquery ?how to get ip address using jquery ?JQUERY

Click to see more ...

  530     196