Project

General

Profile

Docs ModUploadProgress » status.html

example 1 - status.html - stbuehler, 2009-02-17 09:50

 
1
<html>
2
<head>
3
    <title>Upload Status</title>
4

    
5
<script type="text/javascript">
6
 interval = null;
7
 checktimeout = null;
8
 lastbytes=0;
9
 showparenttimeout = null;
10
 
11
function getXMLHttpRequest()
12
{
13
    var req = false;
14
    // branch for native XMLHttpRequest object
15
    if(window.XMLHttpRequest && !(window.ActiveXObject)) 
16
    {
17
    	try 
18
	{
19
	    req = new XMLHttpRequest();
20
        } catch(e) 
21
	{
22
	    req = false;
23
        }
24
	
25
    // branch for IE/Windows ActiveX version
26
    } else if(window.ActiveXObject) 
27
    {
28
       	try 
29
	{
30
    	    req = new ActiveXObject("Msxml2.XMLHTTP");
31
      	} catch(e) 
32
	{
33
    	    try 
34
	    {
35
          	req = new ActiveXObject("Microsoft.XMLHTTP");
36
    	    } catch(e) 
37
	    {
38
          	req = false;
39
    	    }
40
	}
41
    }
42

    
43
    return req;
44
}
45

    
46
function roundx(x, n) {
47
  if (n < 1 || n > 14) return false;
48
  var e = Math.pow(10, n);
49
  var k = (Math.round(x * e) / e).toString();
50
  if (k.indexOf('.') == -1) k += '.';
51
    k += e.toString().substring(1);
52
    return k.substring(0, k.indexOf('.') + n+1);
53
}
54

    
55
function closeStatus(upload)
56
{
57
    parent.upfname = '';
58
    
59
    if (interval)
60
    {
61
	window.clearInterval(interval);
62
    }
63
    
64
    if (checktimeout)
65
    {
66
	window.clearTimeout(checktimeout);
67
    }
68
    
69
    if (upload.status != 413)
70
    {
71
	parent.stopStatus();
72
    }
73
}
74

    
75
function fetch(uuid) {
76
    var req;
77
    var pbar;
78
    var pbarc;
79
    var step = 0;
80
    var stepg = 100;
81

    
82
 req = getXMLHttpRequest();
83
 req.open("GET", "/progress", 1);
84
 req.setRequestHeader("X-Progress-Id", uuid);
85
 req.onreadystatechange = function () {
86
  if (req.readyState == 4) {
87
   if (req.status == 200) {
88
    /* poor-man JSON parser */
89
    var upload = eval(req.responseText);
90

    
91
    step = upload.received / (upload.size / 100);
92
    stepg = 0;
93
  
94
    if ( upload.state != undefined && step != NaN && upload.status != '413' && upload.state != 'starting' && upload.state != 'done')
95
    {
96
	if (checktimeout)
97
	{
98
	    window.clearTimeout(checktimeout);
99
	    checktimeout = null;
100
	}
101
    } else
102
    {
103
	if (checktimeout == null)
104
	{
105
	    checktimeout = window.setInterval(
106
		    function () {
107
			closeStatus(upload);
108
		    },
109
			5000
110
		    );
111
	}
112
	
113
    }
114

    
115
    document.getElementById('fname').innerHTML = '<b>Filename:</b> ' + parent.upfname;
116
    document.getElementById('tp').innerHTML = '<b>TP:</b> ' + roundx(((upload.received - lastbytes) / 1024),2).toString() + ' kb/s';
117
    document.getElementById('time').innerHTML = '<b>Time:</b> ' + roundx( (upload.size - upload.received) / (upload.received - lastbytes),2) + ' s';
118
    document.getElementById('byteinfo').innerHTML = '<b>Transfer:</b> ' + roundx(upload.received / 1024,2) + "/" + roundx(upload.size/1024,2) + ' kbs';
119
    
120
    if (upload.state == 'done' || upload.state == 'uploading') {
121

    
122
	bar = document.getElementById('progressbar');
123
	w = 400 * upload.received / upload.size;
124
        bar.style.width = w + 'px';
125
    }
126

    
127
    document.getElementById('state').innerHTML = '<b>Status:</b> ' + upload.state + ', ' + roundx(step,2) + '%';
128

    
129
    lastbytes = upload.received;
130
    
131
    // we are done, stop the interval
132
    if (upload.state == 'done' || upload.status == '413' || step == 100) {
133
     
134
	document.getElementById('tp').innerHTML='';
135
	document.getElementById('time').innerHTML='';
136
	document.getElementById('byteinfo').innerHTML='<a onclick="parent.location.reload()">Back</a>';
137
     
138
     if (upload.status != '413')
139
     {
140
        document.getElementById('state').innerHTML = 'Please wait...';
141
	closeStatus(upload);
142
     } else
143
     {
144
	window.clearInterval(interval);
145
	document.getElementById('state').innerHTML = 'Error, file too big';
146
     }
147
     
148
    }
149

    
150

    
151
    
152
   }else
153
   {
154
    closeStatus();
155
   }
156
   
157
  }
158
  
159
 } 
160
 
161
 req.send(null);
162
}
163

    
164
function openProgressBar() {
165
 /* call the progress-updater every 1000ms */
166
 interval = window.setInterval(
167
   function () {
168
    if (parent.upfname != '')
169
    {
170
     fetch('{TRACKING_ID}');
171
    }
172
   },
173
   1000
174
 );
175
 
176
}
177

    
178
 </script>
179

    
180
</head>
181
<body onload="openProgressBar();">
182
<div id="progressbar" style="width: 1px; background-color: black; border: 1px solid white">&nbsp;</div>
183
   <div id="state">Status is loading...</div>
184
   <div id="tp"></div>
185
   <div id="fname"></div>
186
   <div id="time"></div>
187
   <div id="byteinfo"></div>
188
 </div>
189

    
190
</body>
191
</html>
(2-2/3)