references http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/ http://stackoverflow.com/questions/5813344/how-to-customize-input-type-file http://codepen.io/emiemi/pen/zxNXWR http://www.script-tutorials.com/demos/257/index.html
source - http://www.script-tutorials.com/html5-drag-and-drop-multiple-file-uploader/ or http://www.script-tutorials.com/demos/257/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//test
## HTML5 Drag and Drop Multiple File Uploader
[Back to original tutorial on <span>Script Tutorials</span>](http://www.script-tutorials.com/html5-drag-and-drop-multiple-file-uploader/)
<div class="container">
<div class="contr">
## Drag and Drop your images to 'Drop Area' (up to 5 files at a time, size - under 256kb)
</div>
<div class="upload_form_cont">
<div id="dropArea">Drop Area</div>
<div class="info">
<div>Files left: <span id="count">0</span></div>
<div>Destination url: <input id="url" value="http://www.script-tutorials.com/demos/257/upload.php"></div>
## Result:
<div id="result"></div>
<canvas width="500" height="20"></canvas>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
//script.js
// 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('Progress: ' + Math.floor(progress*100) + '%', 50, 15);
}
// drag over
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">Too big file (max filesize exceeded)</div>';
handleComplete(nextFile.size);
} else {
uploadFile(nextFile, status);
}
} else {
dropArea.className = '';
}
}
initHandlers();
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//It doesn’t upload files of course. But it returns some information about our files (which we will display at our receiver (client) side).
<?php set="" error="" reporting="" level="" if="" (version_compare(phpversion(),="" '5.3.0',="" '=""?>=') == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
function bytesToSize1024($bytes, $precision = 2) {
$unit = array('B','KB','MB');
return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i];
}
if (isset($_FILES['myfile'])) {
$sFileName = $_FILES['myfile']['name'];
$sFileType = $_FILES['myfile']['type'];
$sFileSize = bytesToSize1024($_FILES['myfile']['size'], 1);
echo <eof></eof><div class="s">
Your file: {$sFileName} has been successfully received.
Type: {$sFileType}
Size: {$sFileSize}
</div>
EOF;
} else {
echo '<div class="f">An error occurred</div>';
}
origin - http://www.pipiscrew.com/?p=3285 html5-drag-drop-uploader