PHP APC文件上传进度条实现范例

Standard
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>

One thought on “PHP APC文件上传进度条实现范例

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.