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
95
96
97
98
99
100
101
102
103
104
105
106
107
| //upload.php (文件上传表单,提交到target.php)
<?php $id = $_GET['id']; ?>
<form enctype="multipart/form-data" id="upload_form" action="target.php" method="POST">
<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $id?>"/>
<input type="file" id="test_file" name="test_file"/><br/>
<input onclick="window.parent.startProgress(); return true;" type="submit" value="Upload!"/>
</form>
//target.php (接收upload.php上传表单提交页面)
<?php
set_time_limit(600);
if($_SERVER['REQUEST_METHOD']=='POST') {
move_uploaded_file($_FILES["test_file"]["tmp_name"],
dirname($_SERVER['SCRIPT_FILENAME'])."/UploadTemp/" . $_FILES["test_file"]["name"]);//UploadTemp文件夹位于此脚本相同目录下
echo "<p>File uploaded. Thank you!</p>";
}
//getprogress.php (用来得到文件上传状态信息,让js来调用)
<?php
session_start();
if(isset($_GET['progress_key'])) {
$status = apc_fetch('upload_'.$_GET['progress_key']);
echo ($status['current']/$status['total'])*100;
}
?>
//progress.php (调用getprogress.php和upload.php,显示进度条)
<?php
$id = md5(uniqid(rand(), true));
?>
<html>
<head><title>Upload Example</title></head>
<body>
<script language="javascript">
var xmlHttp;
var proNum=0;
var loop=0;
var Try = {
these: function() {
var returnValue;
for (var i = 0; i < arguments.length; i++) {
var lambda = arguments[i];
try {
returnValue = lambda();
break;
} catch (e) {}
}
return returnValue;
}
}
function createXHR(){
return Try.these(
function() {return new XMLHttpRequest()},
function() {return new ActiveXObject('Msxml2.XMLHTTP')},
function() {return new ActiveXObject('Microsoft.XMLHTTP')}
) || false;
}
var xmlHttp;
function sendURL() {
xmlHttp=createXHR();
var url="getprogress.php?progress_key=<?php echo $id;?>";
xmlHttp.onreadystatechange = doHttpReadyStateChange;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function doHttpReadyStateChange() {
if (xmlHttp.readyState == 4){
proNum=parseInt(xmlHttp.responseText);
document.getElementById("progressinner").style.width = proNum+"%";
document.getElementById("showNum").innerHTML = proNum+"%";
if ( proNum < 100){
setTimeout("getProgress()", 100);
}
}
}
function getProgress(){
loop++;
document.getElementById("showNum2").innerHTML = loop;
sendURL();
}
var interval;
function startProgress(){
document.getElementById("progressouter").style.display="block";
setTimeout("getProgress()", 100);
}
</script>
<iframe id="theframe" name="theframe"
src="upload.php?id=<?php echo($id); ?>"
style="border: none; height: 100px; width: 400px;" >
</iframe>
<br/><br/>
<div id="progressouter" style=
"width: 500px; height: 20px; border: 6px solid red; display:none;">
<div id="progressinner" style=
"position: relative; height: 20px; background-color: purple; width: 0%; ">
</div>
</div><div id='showNum'></div><br>
<div id='showNum2'></div>
</body>
</html> |
//upload.php (文件上传表单,提交到target.php)
<?php $id = $_GET['id']; ?>
<form enctype="multipart/form-data" id="upload_form" action="target.php" method="POST">
<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $id?>"/>
<input type="file" id="test_file" name="test_file"/><br/>
<input onclick="window.parent.startProgress(); return true;" type="submit" value="Upload!"/>
</form>
//target.php (接收upload.php上传表单提交页面)
<?php
set_time_limit(600);
if($_SERVER['REQUEST_METHOD']=='POST') {
move_uploaded_file($_FILES["test_file"]["tmp_name"],
dirname($_SERVER['SCRIPT_FILENAME'])."/UploadTemp/" . $_FILES["test_file"]["name"]);//UploadTemp文件夹位于此脚本相同目录下
echo "<p>File uploaded. Thank you!</p>";
}
//getprogress.php (用来得到文件上传状态信息,让js来调用)
<?php
session_start();
if(isset($_GET['progress_key'])) {
$status = apc_fetch('upload_'.$_GET['progress_key']);
echo ($status['current']/$status['total'])*100;
}
?>
//progress.php (调用getprogress.php和upload.php,显示进度条)
<?php
$id = md5(uniqid(rand(), true));
?>
<html>
<head><title>Upload Example</title></head>
<body>
<script language="javascript">
var xmlHttp;
var proNum=0;
var loop=0;
var Try = {
these: function() {
var returnValue;
for (var i = 0; i < arguments.length; i++) {
var lambda = arguments[i];
try {
returnValue = lambda();
break;
} catch (e) {}
}
return returnValue;
}
}
function createXHR(){
return Try.these(
function() {return new XMLHttpRequest()},
function() {return new ActiveXObject('Msxml2.XMLHTTP')},
function() {return new ActiveXObject('Microsoft.XMLHTTP')}
) || false;
}
var xmlHttp;
function sendURL() {
xmlHttp=createXHR();
var url="getprogress.php?progress_key=<?php echo $id;?>";
xmlHttp.onreadystatechange = doHttpReadyStateChange;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function doHttpReadyStateChange() {
if (xmlHttp.readyState == 4){
proNum=parseInt(xmlHttp.responseText);
document.getElementById("progressinner").style.width = proNum+"%";
document.getElementById("showNum").innerHTML = proNum+"%";
if ( proNum < 100){
setTimeout("getProgress()", 100);
}
}
}
function getProgress(){
loop++;
document.getElementById("showNum2").innerHTML = loop;
sendURL();
}
var interval;
function startProgress(){
document.getElementById("progressouter").style.display="block";
setTimeout("getProgress()", 100);
}
</script>
<iframe id="theframe" name="theframe"
src="upload.php?id=<?php echo($id); ?>"
style="border: none; height: 100px; width: 400px;" >
</iframe>
<br/><br/>
<div id="progressouter" style=
"width: 500px; height: 20px; border: 6px solid red; display:none;">
<div id="progressinner" style=
"position: relative; height: 20px; background-color: purple; width: 0%; ">
</div>
</div><div id='showNum'></div><br>
<div id='showNum2'></div>
</body>
</html>
Related Posts
谢谢