1
|
<?php
|
2
|
header("Cache-Control: no-cache, must-revalidate");
|
3
|
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
|
4
|
|
5
|
if (@$_GET['id']) {
|
6
|
echo json_encode(uploadprogress_get_info($_REQUEST['id']));
|
7
|
exit();
|
8
|
}
|
9
|
|
10
|
if (@$_POST['UPLOAD_IDENTIFIER'])
|
11
|
exit();
|
12
|
|
13
|
$uuid = uniqid();
|
14
|
?>
|
15
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
16
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
17
|
<head>
|
18
|
<title>Jquery WITS Form</title>
|
19
|
<link rel="stylesheet" type="text/css" href="http://t.wits.sg/misc/css/reset.css"/>
|
20
|
<link rel="stylesheet" type="text/css" href="http://t.wits.sg/misc/css/base.css"/>
|
21
|
<link rel="stylesheet" type="text/css" href="http://t.wits.sg/misc/css/template.css"/>
|
22
|
<link rel="stylesheet" type="text/css" href="http://t.wits.sg/misc/css/form.css"/>
|
23
|
<script type="text/javascript">
|
24
|
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
25
|
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
26
|
</script>
|
27
|
<script type="text/javascript">
|
28
|
try {
|
29
|
var pageTracker = _gat._getTracker("UA-1120774-3");
|
30
|
pageTracker._trackPageview();
|
31
|
} catch(err) {}
|
32
|
</script>
|
33
|
<script type="text/javascript" src="http://t.wits.sg/misc/js/jQuery/jquery.js"></script>
|
34
|
<script type="text/javascript" src="js/jquery.progressbar.min.js"></script>
|
35
|
<script type="text/javascript">
|
36
|
var progress_key = '<?= $uuid ?>';
|
37
|
|
38
|
$(document).ready(function() {
|
39
|
$("#pb1").progressBar();
|
40
|
$("#pb2").progressBar({ barImage: 'images/progressbg_yellow.gif'} );
|
41
|
$("#pb3").progressBar({ barImage: 'images/progressbg_orange.gif', showText: false} );
|
42
|
$("#pb4").progressBar(65, { showText: false, barImage: 'images/progressbg_red.gif'} );
|
43
|
$(".pb5").progressBar({ max: 2000, textFormat: 'fraction', callback: function(data) { if (data.running_value == data.value) { alert("Callback example: Target reached!"); } }} );
|
44
|
$("#uploadprogressbar").progressBar();
|
45
|
});
|
46
|
|
47
|
function beginUpload() {
|
48
|
$("#uploadprogressbar").fadeIn();
|
49
|
|
50
|
var i = setInterval(function() {
|
51
|
$.getJSON("demo.php?id=" + progress_key, function(data) {
|
52
|
if (data == null) {
|
53
|
clearInterval(i);
|
54
|
location.reload(true);
|
55
|
return;
|
56
|
}
|
57
|
|
58
|
var percentage = Math.floor(100 * parseInt(data.bytes_uploaded) / parseInt(data.bytes_total));
|
59
|
$("#uploadprogressbar").progressBar(percentage);
|
60
|
});
|
61
|
}, 1500);
|
62
|
|
63
|
return true;
|
64
|
}
|
65
|
</script>
|
66
|
<style type="text/css">
|
67
|
table tr { vertical-align: top; }
|
68
|
table td { padding: 3px; }
|
69
|
div.contentblock { padding-bottom: 25px; }
|
70
|
#uploadprogressbar { display: none; }
|
71
|
</style>
|
72
|
</head>
|
73
|
<body>
|
74
|
<div id="container">
|
75
|
<div style="float: right; text-align: right; width: 300px;">download me at <a href="http://t.wits.sg">http://t.wits.sg</a></div>
|
76
|
<div class="contentblock">
|
77
|
<h2>Progress Bars & Controls</h2>
|
78
|
<table>
|
79
|
<tr><td>Default Multicolored Bar</td><td><span class="progressBar" id="pb1">75%</span></td></tr>
|
80
|
<tr><td>Yellow Bar</td><td><span class="progressBar" id="pb2">35%</span></td></tr>
|
81
|
<tr><td>Orange Bar (No Text)</td><td><span class="progressBar" id="pb3">55%</span></td></tr>
|
82
|
<tr><td>Red Bar (No Text)</td><td><span class="progressBar" id="pb4">85%</span></td></tr>
|
83
|
<tr><td>Default Multicolored Bar with max value of 2000</td><td><span class="progressBar pb5">32</span></td></tr>
|
84
|
</table>
|
85
|
<strong>Some controls: </strong>
|
86
|
<a href="#" onclick="$('#pb1').progressBar(20);">20</a> |
|
87
|
<a href="#" onclick="$('#pb1').progressBar(40);">40</a> |
|
88
|
<a href="#" onclick="$('#pb1').progressBar(60);">60</a> |
|
89
|
<a href="#" onclick="$('#pb1').progressBar(80);">80</a> |
|
90
|
<a href="#" onclick="$('#pb1').progressBar(100);">100</a>
|
91
|
</div>
|
92
|
|
93
|
<div class="contentblock">
|
94
|
<h2>Usage: </h2>
|
95
|
<pre class="ln-"><code class="js">
|
96
|
$(document).ready(function() {
|
97
|
$("#pb1").progressBar();
|
98
|
$("#pb2").progressBar({ barImage: 'images/progressbg_yellow.gif'} );
|
99
|
$("#pb3").progressBar({ barImage: 'images/progressbg_orange.gif', showText: false} );
|
100
|
$("#pb4").progressBar(65, { showText: false, barImage: 'images/progressbg_red.gif'} );
|
101
|
$(".pb5").progressBar({ max: 2000, textFormat: 'fraction', callback: function(data) { if (data.running_value == data.value) { alert("Callback example: Target reached!"); } }} );
|
102
|
$("#uploadprogressbar").progressBar();
|
103
|
});
|
104
|
</code></pre>
|
105
|
|
106
|
</div>
|
107
|
<div class="contentblock">
|
108
|
<h2>Progress Bars Form Example</h2>
|
109
|
<a href="demo.txt">Download the PHP Source here</a>
|
110
|
<div class="edit_panel">
|
111
|
<form action="demo.php" target="progressFrame" method="post" id="uploadform" enctype="multipart/form-data" onsubmit="beginUpload();">
|
112
|
<input type="hidden" name="UPLOAD_IDENTIFIER" id="progress_key" value="<?= $uuid ?>" />
|
113
|
<table class="form">
|
114
|
<tr><td class="labelcol"><label for="firstname">First Name</label><em>*</em></td><td class="inpulcol"><input type="text" name="firstname" id="firstname" class="text" /></td></tr>
|
115
|
<tr><td class="labelcol"><label for="lastname">First Name</label><em>*</em></td><td class="inpulcol"><input type="text" name="lastname" id="lastname" class="text" /></td></tr>
|
116
|
<tr><td class="labelcol"><label for="password">First Name</label><em>*</em></td><td class="inpulcol"><input type="password" name="password" id="password" class="text" /></td></tr>
|
117
|
<tr><td class="labelcol"><label for="ulfile1">File 1</label></td>
|
118
|
<td><input type="file" name="ulfile1" id="ulfile1" /></td>
|
119
|
</tr>
|
120
|
<tr><td class="labelcol"><label for="ulfile2">File 2</label></td>
|
121
|
<td><input type="file" name="ulfile2" id="ulfile2" /></td>
|
122
|
</tr>
|
123
|
<tr><td class="labelcol"><label for="ulfile3">File 3</label></td>
|
124
|
<td><input type="file" name="ulfile3" id="ulfile3" /></td>
|
125
|
</tr>
|
126
|
<tr><td class="labelcol"></td>
|
127
|
<td class="inputcol"><input type="submit" value="Submit" />
|
128
|
<br />
|
129
|
<span class="progressbar" id="uploadprogressbar">0%</span>
|
130
|
</td></tr>
|
131
|
</table>
|
132
|
</form>
|
133
|
</div>
|
134
|
</div>
|
135
|
|
136
|
<div class="contentblock">
|
137
|
<h2>Upload Form Javascript: </h2>
|
138
|
<pre class="ln-"><code class="js">
|
139
|
var progress_key = '<?= $uuid ?>';
|
140
|
|
141
|
// this sets up the progress bar
|
142
|
$(document).ready(function() {
|
143
|
$("#uploadprogressbar").progressBar();
|
144
|
});
|
145
|
|
146
|
// fades in the progress bar and starts polling the upload progress after 1.5seconds
|
147
|
function beginUpload() {
|
148
|
// uses ajax to poll the uploadprogress.php page with the id
|
149
|
// deserializes the json string, and computes the percentage (integer)
|
150
|
// update the jQuery progress bar
|
151
|
// sets a timer for the next poll in 750ms
|
152
|
$("#uploadprogressbar").fadeIn();
|
153
|
|
154
|
var i = setInterval(function() {
|
155
|
$.getJSON("demo.php?id=" + progress_key, function(data) {
|
156
|
if (data == null) {
|
157
|
clearInterval(i);
|
158
|
location.reload(true);
|
159
|
return;
|
160
|
}
|
161
|
|
162
|
var percentage = Math.floor(100 * parseInt(data.bytes_uploaded) / parseInt(data.bytes_total));
|
163
|
$("#uploadprogressbar").progressBar(percentage);
|
164
|
});
|
165
|
}, 1500);
|
166
|
}
|
167
|
</code></pre>
|
168
|
</div>
|
169
|
</div>
|
170
|
<!-- Ok, you so need this iframe for Safari and Chrome to work, the webkit engine doesnt allow ajax calls to be made after a form begins submission -->
|
171
|
<iframe style="display: none;" name="progressFrame"></iframe>
|
172
|
</body>
|
173
|
</html>
|