Project

General

Profile

Download (7.46 KB) Statistics
| Branch: | Tag: | Revision:
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 &amp; 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>
(2-2/2)