1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>mod_upload_progress test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">// <![CDATA[
interval = null;
function fetch(uuid) {
req = new XMLHttpRequest();
req.open("GET", "/progress", 1);
req.setRequestHeader("X-Progress-ID", uuid);
req.onreadystatechange = function () {
if (req.readyState == 4) {
if (req.status == 200) {
/* poor-man JSON parser */
document.getElementById('dump').innerHTML = req.responseText;
var upload = eval('new Object(' + req.responseText + ')');
document.getElementById('tp').innerHTML = upload.state;
/* change the width if the inner progress-bar */
if (upload.state == 'done' || upload.state == 'uploading') {
bar = document.getElementById('progressbar');
w = 400 * upload.received / upload.size;
bar.style.width = w + 'px';
}
/* we are done, stop the interval */
if (upload.state == 'done') {
bar = document.getElementById('progressbar');
bar.style.width = '398px';
window.clearTimeout(interval);
}
}
}
}
req.send(null);
}
function openProgressBar(event) {
/* generate random progress-id */
uuid = "";
for (i = 0; i < 32; i++) {
uuid += Math.floor(Math.random() * 16).toString(16);
}
/* create an iframe as a form target */
document.getElementById("frameholder").innerHTML =
'<iframe id="uploadframe" name="uploadframe" width="0" height="0" ' +
'frameborder="0" border="0" src="about:blank"></iframe>';
/* patch the form-action tag to include the progress-id */
var form = document.getElementById("upload");
form.action="/upload.html?X-Progress-ID=" + uuid;
form.target="uploadframe";
/* call the progress-updater every 1000ms */
interval = window.setInterval(
function () {
fetch(uuid);
},
1000
);
form.submit();
return false;
}
// ]]>
</script>
</head>
<body>
<h1>mod_upload_progress test page</h1>
<div>
<form id="upload" enctype="multipart/form-data"
action="/upload.html" method="post"
onsubmit="return openProgressBar();">
<div>
<input type="hidden" name="MAX_FILE_SIZE" value="30000000" />
<input name="userfile" type="file" />
<input type="submit" value="Send File" />
</div>
</form>
</div>
<div>
<div id="progress" style="width: 400px; border: 1px solid black">
<div id="progressbar"
style="width: 1px; background-color: black; border: 1px solid white">
</div>
</div>
<div id="tp">(throughput)</div>
<pre id="dump"></pre>
<div id="frameholder"></div>
</div>
</body>
</html>
|
