This repository was archived by the owner on May 17, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (124 loc) · 4.42 KB
/
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
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="html5_uploader.jquery.js"></script>
<script>
$(function(){
$("#drop-area-id").html5_uploader().bind("html5_uploader.dragenter", function(){
$(this).addClass("drop-area-hover");
$(".log").prepend("<div>Event: Dragenter</div>");
}).bind("html5_uploader.dragleave html5_uploader.drop", function(){
$(".log").prepend("<div>Event: Dragleave</div>");
$(this).removeClass("drop-area-hover");
}).bind("html5_uploader.drop", function(evt, files, files_count){
$(".log").prepend("<div>Event: drop , Droped "+files_count+" files</div>");
$(this).trigger('html5_uploader.send', [{
url : "upload.php" //UPLOAD LINK
}]);
}).bind("html5_uploader.start", function(evnt, files_count){
$(".log").prepend("<div>Event: start , Start upload "+files_count+" files</div>");
}).bind("html5_uploader.finish", function(evnt, files_count){
$(".log").prepend("<div>Finished upload</div>");
}).bind("html5_uploader.start_one", function(evnt, file_name, file_number, total){
$(".log").prepend("<div class='progres-bar'><div></div></div><div>Event: start_one, Start upload file "+file_name+" with no. "+file_number+", total "+total+"</div>");
}).bind("html5_uploader.finish_one", function(evnt, response_server, file_name, file_number, total){
$(".log").prepend("<div>Event: finish_one, Finished upload file "+file_name+" with no. "+file_number+", total "+total+", server response "+response_server+"</div>");
}).bind("html5_uploader.error", function(evnt, file_name, e){
$(".log").prepend("<div>Event: error, Error file "+file_name+" , error detail "+e+"</div>");
}).bind("html5_uploader.old_browser", function(evnt){
$(".log").prepend("<div>Event: old_browser, You have old browser</div>");
}).bind("html5_uploader.abort", function(evnt){
$(".log").prepend("<div>Event: abort</div>");
}).bind("html5_uploader.progress", function(evnt, uploaded, fileSize, fileName, number, total){
$(".log .progres-bar div").css("width",Math.round((uploaded/fileSize)*100)+"%" ).text("Progress "+ uploaded +" / "+ fileSize +" - "+Math.round((uploaded/fileSize)*100)+"%")
});
});
</script>
<style>
html {
background-color: #2F2727;
background-image: url(images/radial_bg.png);
background-position: center center;
background-repeat: no-repeat;
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
background: -ms-radial-gradient(circle, #1a82f7, #2F2727);
}
.progres-bar {
width: 100%;
background: white;
}
.progres-bar div {
background: black;
text-align:center;
width: 0;
height:20px;
color: white;
text-overflow: ellipsis-word;
}
.drop-area {
width: 70%;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
height: 400px;
background: rgba(203,103,103, 0.5);
border: 1px dashed #000;
margin:auto;
margin-top: 30px;
}
.drop-area-hover {
background : yellow;
}
.log {
margin: 20px;
max-height: 200px;
background: rgba(255,255,255,0.5);
overflow-y : scroll;
}
.g-adv {
width: 800px;
height: 100px;
margin:auto;
}
</style>
</head>
<body>
<div class="g-adv">
<!-- adv for me :] I need cash for coffe! -->
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7650113987924443";
/* 728x90, utworzono 10-05-30 */
google_ad_slot = "5148700426";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!-- end adv -->
</div>
<div id="drop-area-id" class="drop-area">
</div>
<div class="log">
</div>
<div class="g-adv">
<!-- adv for me :] I need cash for coffe! -->
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7650113987924443";
/* 728x90, utworzono 10-05-30 */
google_ad_slot = "5148700426";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!-- end adv -->
</div>
</body>
</html>