Context Navigation

Back to Ticket #1300

Ticket #1300: index.2.html

File index.2.html, 7.2 kB (added by yelims, 13 months ago)
working example of upload progress in action, uses YUI framework for ajax calls

Line
1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2	<html>
3
4
5	<head>
6
7	<title>Lighttpd Upload Progress example (works since Lighttpd 1.5 svn version r1897 and above )</title>
8
9
10
11
12
13	<!-- this example uses YUI (Yahoo user interface library) for reseting the css and javascript needed from ajax calls -->
14	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/reset/reset-min.css" />
15	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/fonts/fonts-min.css" />
16	<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
17	<script type="text/javascript"src="http://yui.yahooapis.com/2.3.0/build/connection/connection-min.js"></script>
18	<!-- this example uses YUI (Yahoo user interface library) for reseting the css and javascript needed from ajax calls -->
19
20
21
22
23
24	<script type="text/javascript">
25
26	//start progress meter funciton
27	function startProgressMeter( upload_url, progress_url, update_interval ){
28
29
30	//generate random 32 char progress-id
31	var uuid = "";
32	for (i = 0; i < 32; i++) {
33	uuid += Math.floor(Math.random() * 16).toString(16);
34	}
35
36	//hide the file upload panel and show the progress + notification panels only
37	YAHOO.util.Dom.setStyle('uploadControlPanel', 'display', 'none');
38	YAHOO.util.Dom.setStyle('uploadProgressPanel', 'display', 'block');
39	YAHOO.util.Dom.setStyle('uploadProgressBarField', 'display', 'block');
40	YAHOO.util.Dom.setStyle('uploadNotificationPanel', 'display', 'block');
41
42
43	//patch the form-action tag to include the progress-id
44	//lighttpd expects file uploads in the format
45	//http://example.com/upload.php?X-Progress-ID=<32_character_unique_id_goes_here>
46	document.getElementById("uploadFrm").action = "" + upload_url + uuid;
47	//notify user
48	document.getElementById('uploadNotificationPanel').innerHTML = 'Upload started'
49
50
51
52	//call the progress-updater every so often
53	interval = window.setInterval(
54
55	function () {
56	updateProgress( uuid, progress_url );
57	},
58	update_interval
59	);
60
61	}
62
63
64
65	//ajax send an upload progress request
66	function updateProgress( uuid, progress_url ){
67
68	//response
69	var responseSuccess = function(o){
70
71	//json decode the response form the server
72	var upload = eval( o.responseText );
73
74
75	//output to debug panel, remove this later
76	document.getElementById('debugPanel').innerHTML += o.responseText + '<br />';
77
78
79
80	//uploading
81	if (upload.state == 'done' \|\| upload.state == 'uploading') {
82
83	//get the current width of the upload box from the stylesheet
84	var progressBarFieldStyleWidth = parseInt(
85	YAHOO.util.Dom.getStyle('uploadProgressPanel', 'width')
86	);
87
88	//calculate the new width when the response comes in
89	progressBarFieldWidth = progressBarFieldStyleWidth * upload.received / upload.size;
90
91	//set the style expanding the width of field
92	YAHOO.util.Dom.setStyle('uploadProgressBarField', 'width', progressBarFieldWidth+'px');
93
94
95	//calculate percentage
96	var percentage = upload.received / upload.size;
97	percentage = percentage * 100;
98	var percentageStr = String(percentage);
99	percentageStr = percentageStr.split('.');
100	percentageStr = percentageStr[0];
101
102
103
104	//notify user
105	document.getElementById('uploadNotificationPanel').innerHTML = percentageStr + '%   '
106
107	//show progress in megabytes
108	document.getElementById('uploadNotificationPanel').innerHTML += convertToMegaBytes( upload.received ) + ' / ' + convertToMegaBytes( upload.size );
109	}
110
111	//finished upload clear the timer
112	if (upload.state == 'done') {
113
114	window.clearTimeout(interval);
115	}
116	}
117
118	var callback = {
119
120	success:responseSuccess
121	}
122
123
124	//the line bellow is VERY IMPORTANT, the upload id is sent as X-Progress-ID http header
125	YAHOO.util.Connect.initHeader('X-Progress-ID', uuid );
126	var request = YAHOO.util.Connect.asyncRequest(
127	'GET',
128	progress_url,
129	callback
130	)
131	}
132
133
134	//converts bytes into megabytes
135	function convertToMegaBytes( bytes ) {
136
137	var mb = Math.round((bytes/[Math.pow(1024,2)])*1000000)/1000000;
138
139	var mbStr = String(mb);
140
141	var mbArr = mbStr.split('.');
142
143	var rhs = mbArr[1];
144
145	mbStr = mbArr[0] + '.' + rhs.substr(0,2) + 'MB';
146
147	return mbStr;
148	}
149
150	</script>
151
152
153	<!-- quick stylesheet, all is self explanotary here -->
154	<style type="text/css">
155
156	#uploadPanel{
157
158	margin: 0px;
159	padding: 0px;
160	border: 0px;
161	width: 302px;
162	text-align: left;
163	}
164
165	#uploadControlPanel{
166
167	display: block;
168	text-align: left;
169	}
170
171	#uploadNotificationPanel{
172
173	text-align: left;
174	display: none;
175	font-family: courier;
176	font-size: 100%;
177	font-weight: bold;
178	color: blue;
179	}
180
181	#uploadProgressPanel{
182
183	text-align: left;
184	display: none;
185	width: 300px;
186	border: 1px solid blue;
187	}
188
189	#uploadProgressBarField{
190
191	display: none;
192	text-align: left;
193	width: 1px;
194	background-color: #CCCFFF;
195	border: 1px solid white;
196	}
197
198	h1{
199
200	font-size: 140%;
201	margin: 20px;
202	}
203
204	h2{
205
206	font-size: 120%;
207	margin: 20px;
208	}
209	</style>
210	</head>
211
212	<body>
213	<h1>Lighttpd Upload Progress example (works since Lighttpd 1.5 svn version r1897 and above )</h1>
214	<h2>this example uses YUI (Yahoo user interface library) for reseting the css and javascript needed from ajax calls</h2>
215
216	<hr />
217
218	<p>
219	The file is uploaded to:
220	<strong>http://example.com/upload.php?X-Progress-ID=<32_character_unique_id_goes_here> </strong>
221	<br />
222	<br />
223	The progress meter ajax requests go to:
224	<strong>http://example.com/progress</strong>
225	<br />
226	<br />
227	see html source for more comments
228	</p>
229
230	<hr />
231
232	<div id="uploadPanel">
233
234	<div id="uploadControlPanel">
235
236	<form id="uploadFrm"
237	enctype="multipart/form-data"
238	action=""
239	method="POST"
240	onsubmit="startProgressMeter( 'upload.php?X-Progress-ID=', '/progress', 1000 );">
241
242	<input id="fileFld" type="file" name="fileFld" />
243	<input id="uploadBtn" type="submit" value="Upload" />
244
245	</form>
246
247	</div>
248
249	<div id="uploadProgressPanel">
250
251	<div id="uploadProgressBarField" > </div>
252
253	</div>
254
255	<div id="uploadNotificationPanel"> </div>
256
257	</div>
258
259
260	<!-- shows the result of the ajax calls, handy for illustration/debugging purposes -->
261	<div id="debugPanel"> </div>
262	<!-- shows the result of the ajax calls, handy for illustration/debugging purposes -->
263
264	</body>
265
266	</html>

Download in other formats:

Original Format