Project

General

Profile

Bug #1300 » index.html

the html upload page - yelims, 2007-08-13 21:16

 
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
<html>
3
	<head>
4
		
5
		<title>upload progress test</title>
6

    
7
		<link 	rel="stylesheet" type="text/css" 
8
				href="http://yui.yahooapis.com/2.3.0/build/reset/reset-min.css" />   
9
		<link 	rel="stylesheet" type="text/css" 
10
				href="http://yui.yahooapis.com/2.3.0/build/fonts/fonts-min.css" /> 
11
		
12
		<script type="text/javascript" 
13
				src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js">
14
		</script>
15
				
16
		<script type="text/javascript"
17
				src="http://yui.yahooapis.com/2.3.0/build/connection/connection-min.js">
18
		</script>
19
	
20
		<script type="text/javascript">
21
			
22
			//start progress meter
23
			function startProgressMeter( upload_url, progress_url, update_interval ){
24
			 	
25
			 	//assume not submitted
26
			 	var submitted = false;
27
			 	
28
			 	
29
			 
30
			 	if(submitted == true) { //already submitted
31
					
32
					return; 
33
				}
34
				else{ //not submitted
35

    
36
					
37
					//generate random progress-id 
38
				 	var uuid = "";
39
				 	for (i = 0; i < 32; i++) {
40
				  		uuid += Math.floor(Math.random() * 16).toString(16);
41
				 	}
42
				 	
43
				 	//hide the controll panel and show the progress + notification panels
44
				 	YAHOO.util.Dom.setStyle('uploadControlPanel', 'display', 'none'); 
45
				 	YAHOO.util.Dom.setStyle('uploadProgressPanel', 'display', 'block'); 
46
				 	YAHOO.util.Dom.setStyle('uploadProgressBarField', 'display', 'block'); 
47
				 	YAHOO.util.Dom.setStyle('uploadNotificationPanel', 'display', 'block'); 
48

    
49
						
50
				 	//patch the form-action tag to include the progress-id
51
				 	document.getElementById("uploadFrm").action = "" + upload_url + uuid;
52
					//notify user
53
				 	document.getElementById('uploadNotificationPanel').innerHTML =	'Upload started'
54
				 	
55
		
56
					 
57
					 //call the progress-updater every so often
58
				 	interval = window.setInterval(
59
				   		
60
						function () {
61
				     		updateProgress( uuid, progress_url );
62
				   		},
63
				   		update_interval
64
				 	);
65
				}
66
			}
67
			
68
			//send an upload progress request
69
			function updateProgress( uuid, progress_url ){
70

    
71
				//response
72
				var responseSuccess = function(o){
73
					
74
					//json decode
75
					var upload =  eval( o.responseText );
76
					document.getElementById('response').innerHTML +=	o.responseText + '<br />';
77
					
78
					//uploading
79
				    if (upload.state == 'done' || upload.state == 'uploading') {
80
				    	
81
				    	//get the width of the upload box from the stylesheet
82
				    	var progressBarFieldStyleWidth = parseInt( 
83
							YAHOO.util.Dom.getStyle('uploadProgressPanel', 'width') 
84
						);
85

    
86
						//calculate new width
87
						progressBarFieldWidth = progressBarFieldStyleWidth * upload.received / upload.size;
88
				     	
89
						//set the style expanding the field
90
						YAHOO.util.Dom.setStyle('uploadProgressBarField', 'width', progressBarFieldWidth+'px'); 
91
						
92
						
93
						//calculate percentage
94
						var percentage		= 	upload.received / upload.size;	
95
						percentage			=	percentage * 100;
96
						var percentageStr 	= 	String(percentage);
97
						percentageStr		=	percentageStr.split('.');
98
						percentageStr		=	percentageStr[0];
99
						
100
						
101
						
102
						//notify user
103
						document.getElementById('uploadNotificationPanel').innerHTML =	percentageStr + '%'
104
				 	
105
				 		//show progress in megabytes
106
						document.getElementById('uploadNotificationPanel').innerHTML +=	'&nbsp;&nbsp;&nbsp;' + convertToMegaBytes( upload.received ) + '&nbsp;/&nbsp;' + convertToMegaBytes( upload.size );
107
				    }
108
				    
109
				    //finished upload
110
				    if (upload.state == 'done') {
111
				     	
112
						window.clearTimeout(interval);
113
				    }
114
				}
115
				
116
				var callback = {
117
					
118
					success:responseSuccess
119
				}
120

    
121
				YAHOO.util.Connect.initHeader('X-Progress-ID', uuid );   
122
				var request = YAHOO.util.Connect.asyncRequest(
123
					'GET', 
124
					progress_url, 
125
					callback
126
				)
127
			}
128
			
129
			
130
			function convertToMegaBytes( bytes ) {
131
  				
132
				var mb		=	Math.round((bytes/[Math.pow(1024,2)])*1000000)/1000000;
133
				
134
				var mbStr 	= String(mb);
135
				
136
				var mbArr	=	mbStr.split('.');
137
				
138
				var	rhs		=	mbArr[1];
139
				
140
				mbStr		=	mbArr[0] + '.' + rhs.substr(0,2) + 'MB';
141
				
142
				return mbStr;
143
			}
144
			
145
		</script>
146
		
147
		<style  type="text/css">
148
			
149
			#uploadPanel{
150
				
151
				margin:				0px;
152
				padding:			0px;
153
				border:				0px;
154
				width: 				302px;
155
        		text-align: 		left;
156
			}
157
			
158
			
159
			#uploadControlPanel{
160
				
161
				display:			block;
162
				text-align: 		left;
163
			}
164
			
165
			#uploadNotificationPanel{
166
				
167
				text-align: 		left;
168
				display:			none;
169
				font-family:		courier;
170
				font-size:			100%;
171
				font-weight:		bold;
172
				color:				blue;
173
			}
174
			
175
			#uploadProgressPanel{
176
				
177
				text-align: 		left;
178
				display:			none;
179
				width: 				300px; 
180
				border: 			1px solid blue;
181
			}
182
			
183
			#uploadProgressBarField{
184
				
185
				display:			none;
186
				text-align: 		left;
187
				width: 				1px; 
188
				background-color: 	#CCCFFF; 
189
				border: 			1px solid white;
190
			}
191
		</style>	
192
</head>
193

    
194
<body>
195

    
196
	<div id="uploadPanel">
197
			
198
		<div id="uploadControlPanel">
199
		
200
			<form 	id="uploadFrm" 
201
					enctype="multipart/form-data" 
202
					action="" method="post" 
203
					onsubmit="startProgressMeter( 'upload.php?', '/progress', 1000 );">
204
				
205
					<input id="fileFld" type="file" name="fileFld" />
206
					<input id="uploadBtn" type="submit" value="Upload" />
207
					
208
			</form>
209
			
210
		</div>
211
		
212
		<div id="uploadProgressPanel">
213

    
214
			<div id="uploadProgressBarField" >&nbsp;</div>
215
			
216
		</div>
217
		
218
		<div id="uploadNotificationPanel">&nbsp;</div>
219
		
220
	</div>
221

    
222
		<div id="response">&nbsp;</div>
223
</body>
224

    
225
</html>
(1-1/2)