/
example.html
68 lines (62 loc) · 2.2 KB
/
example.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
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
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.dnd-file-upload.js" ></script>
<script src="jquery.client.js" ></script>
<script src="utils.js" ></script>
<script>
$(document).ready(function(){
$.fn.dropzone.uploadStarted = function(fileIndex, file){
var infoDiv = $("<div></div>");
infoDiv.attr("id", "dropzone-info" + fileIndex);
infoDiv.html("upload started: " + file.fileName);
var progressDiv = $("<div></div>");
progressDiv.css({
'background-color': 'orange',
'height': '20px',
'width': '0%'
});
progressDiv.attr("id", "dropzone-speed" + fileIndex);
var fileDiv = $("<div></div>");
fileDiv.addClass("dropzone-info");
fileDiv.css({
'border' : 'thin solid black',
'margin' : '5px'
});
fileDiv.append(infoDiv);
fileDiv.append(progressDiv);
$("#dropzone-info").after(fileDiv);
};
$.fn.dropzone.uploadFinished = function(fileIndex, file, duration){
$("#dropzone-info" + fileIndex).html("upload finished: " + file.fileName + " ("+getReadableFileSizeString(file.fileSize)+") in " + (getReadableDurationString(duration)));
$("#dropzone-speed" + fileIndex).css({
'width': '100%',
'background-color': 'green'
});
};
$.fn.dropzone.fileUploadProgressUpdated = function(fileIndex, file, newProgress){
$("#dropzone-speed" + fileIndex).css("width", newProgress + "%");
};
$.fn.dropzone.fileUploadSpeedUpdated = function(fileIndex, file, KBperSecond){
var dive = $("#dropzone-speed" + fileIndex);
dive.html( getReadableSpeedString(KBperSecond) );
};
$.fn.dropzone.newFilesDropped = function(){
$(".dropzone-info").remove();
};
$("#dropzone").dropzone({
url : "http://localhost:8080/upload.php",
printLogs : true,
uploadRateRefreshTime : 500,
numConcurrentUploads : 2
});
});
</script>
</head>
<body>
<div style="width: 250px;" >
<div id="dropzone" style="background-color: aqua; width: 100%; height: 200px;" ></div>
<div id="dropzone-info" style="width: 500px;" ></div>
</div>
</body>
</html>