1.
[Image]5375acf5gw1dusqsscfksj.jpg
? 2. Code [HTML] Code
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>osctools Jsbin Online demo-html5 Drag & Drop multiple file upload from Script tutorials</title>
<script class= "Jsbin" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
<style>
. container {
Overflow:hidden;
width:960px;
margin:20px Auto;
}
. contr {
Background-color: #212121;
Color: #FFFFFF;
padding:10px 0;
Text-align:center;
border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
}
. upload_form_cont {
Background:-moz-linear-gradient (#ffffff, #f2f2f2);
Background:-ms-linear-gradient (#ffffff, #f2f2f2);
Background:-webkit-gradient (linear, left top, left bottom, Color-stop (0%, #ffffff), Color-stop (100%, #f2f2f2));
Background:-webkit-linear-gradient (#ffffff, #f2f2f2);
Background:-o-linear-gradient (#ffffff, #f2f2f2);
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #ffffff ', endcolorstr= ' #f2f2f2 ');
-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #ffffff ', endcolorstr= ' #f2f2f2 ')";
Background:linear-gradient (#ffffff, #f2f2f2);
Color: #000;
Overflow:hidden;
}
. info {
Background-color: #EEEEEE;
border:1px solid #DDDDDD;
Float:left;
Font-weight:bold;
height:530px;
margin:20px;
position:relative;
width:560px;
}
. info > Div {
font-size:14px;
Font-weight:bold;
padding:10px 15px 5px;
}
. info > H2 {
Padding:0 15px;
}
. info > Canvas {
margin-left:15px;
margin-bottom:10px;
}
. info #url {
width:400px;
}
#dropArea {
Background-color: #DDDDDD;
border:3px dashed #000000;
Float:left;
font-size:48px;
Font-weight:bold;
height:530px;
line-height:530px;
margin:20px;
position:relative;
Text-align:center;
width:300px;
}
#dropArea. Hover {
Background-color: #CCCCCC;
}
#dropArea. Uploading {
Background: #EEEEEE URL (loading.gif) center 30% no-repeat;
}
#result. S, #result. f {
font-size:12px;
margin-bottom:10px;
padding:10px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#result. s {
Background-color: #77fc9f;
}
#result. f {
Background-color: #fcc577;
}
</style>
<body>
<div class= "Container" >
<div class= "contr" ><div class= "Upload_form_cont" >
<div id= "Droparea" > Drag the file here </div>
<div class= "Info" >
<div> Upload files Remaining: <span id= "Count" >0</span></div>
<div> Upload directory: <input id= "url" value= "http://www.script-tutorials.com/demos/257/upload.php"/></div>
<div id= "Result" ></div>
<canvas width= "height=" ></canvas>
</div>
</div>
</div>
</body>
3. [Code][javascript] Code
Variables
var Droparea = document.getElementById (' Droparea ');
var canvas = document.queryselector (' canvas ');
var context = Canvas.getcontext (' 2d ');
var count = document.getElementById (' count ');
var destinationurl = document.getElementById (' url ');
var result = document.getElementById (' result ');
var list = [];
var totalsize = 0;
var totalprogress = 0;
Main initialization
(function () {
init handlers
function Inithandlers () {
Droparea.addeventlistener (' drop ', Handledrop, false);
Droparea.addeventlistener (' DragOver ', Handledragover, false);
}
Draw Progress
function Drawprogress (progress) {
Context.clearrect (0, 0, canvas.width, canvas.height); Clear context
Context.beginpath ();
Context.strokestyle = ' #4B9500 ';
Context.fillstyle = ' #4B9500 ';
Context.fillrect (0, 0, Progress * 500, 20);
Context.closepath ();
Draw progress (as text)
Context.font = ' 16px Verdana ';
Context.fillstyle = ' #000 ';
Context.filltext (' Upload progress: ' + Math.floor (progress*100) + '% ', 50, 15);
}http://www.huiyi8.com/huawen/?
Drag over pattern
function Handledragover (event) {
Event.stoppropagation ();
Event.preventdefault ();
Droparea.classname = ' hover ';
}
Drag drop
function Handledrop (event) {
Event.stoppropagation ();
Event.preventdefault ();
Processfiles (Event.dataTransfer.files);
}
Process Bunch of files
function Processfiles (filelist) {
if (!filelist | |!filelist.length | | list.length) return;
totalsize = 0;
totalprogress = 0;
Result.textcontent = ";
for (var i = 0; i < filelist.length && i < 5; i++) {
List.push (Filelist[i]);
TotalSize + = Filelist[i].size;
}
Uploadnext ();
}
On Complete-start next file
function Handlecomplete (size) {
Totalprogress + = size;
Drawprogress (totalprogress/totalsize);
Uploadnext ();
}
Update progress
function Handleprogress (event) {
var progress = totalprogress + event.loaded;
Drawprogress (progress/totalsize);
}
Upload file
function UploadFile (file, status) {
Prepare XMLHttpRequest
var xhr = new XMLHttpRequest ();
Xhr.open (' POST ', destinationurl.value);
Xhr.onload = function () {
result.innerhtml + = This.responsetext;
Handlecomplete (file.size);
};
Xhr.onerror = function () {
Result.textcontent = This.responsetext;
Handlecomplete (file.size);
};
xhr.upload.onprogress = function (event) {
Handleprogress (event);
}
Xhr.upload.onloadstart = function (event) {
}
Prepare FormData
var formData = new FormData ();
Formdata.append (' myfile ', file);
Xhr.send (FormData);
}
Upload Next file
function Uploadnext () {
if (list.length) {
Count.textcontent = list.length-1;
Droparea.classname = ' uploading ';
var nextfile = List.shift ();
if (nextfile.size >= 262144) {//256KB
result.innerhtml + = ' <div class= ' F ' > file too Large (max FileSize exceeded) </div> ';
Handlecomplete (nextfile.size);
} else {
UploadFile (nextfile, status);
}
} else {
Droparea.classname = ";
}
}
Inithandlers ();
})();
HTML5 implementing file Drag-and-drop uploads
