在PHP5.4以前, 我们可以通过APC提供的功能来实现. 或者使用PECL扩展uploadprogress来实现.
虽然说, 它们能很好的解决现在的问题, 但是也有很明显的不足:
- 1. 他们都需要额外安装(我们并没有打算把APC加入PHP5.4)
- 2. 它们都使用本地机制来存储这些信息, APC使用共享内存, 而uploadprogress使用文件系统(不考虑NFS), 这在多台前端机的时候会造成麻烦.
程序需要php的apc模块的支持，关键点就是在上传的form里添加一个hidden的inpu标签，里面要有name为
APC_UPLOAD_PROGRESS的属性，value值为一个随机数一遍多个人上传。
apc模块的安装方法是，下载php_apc.dll放到ext文件夹下，在php.ini文件里添加
upload_max_filesize =100M
apc.rfc1867 = on
apc.max_file_size = 100M
extension=php_apc.dll
然后测试配置是否成功：
if(apc_fetch)
{echo "apc is working"}
else{echo "apc is not supported!";}
运行效果截图
下面是源码
1 前台页面：
Html代码
- <html>
- <title>PHP+Ajax带进度条文件上传</title>
- <head>
- <style type="text/css">
- #progress{
- border:2px red solid;
- width:200px;
- height:20px;
- display:none;
- }
- #pecent{
- background-color:green;
- display:block;
- width:0px;
- height:20px;
- color:yellow;
- }
- </style>
- </head>
- <body>
- <iframe style="display:none" name="ifm"></iframe>
- <form enctype="multipart/form-data" method="POST" action="upload.php" target="ifm" name="myform">
- <input type="hidden" name="APC_UPLOAD_PROGRESS" id="remark" >
- <input type="file" name="upfile"/>
- <input type="submit" value="上传" name="sub"/>
- </form>
- <div id="progress" class="before"><span id="pecent"></span></div>
- <script type="text/javascript">
- (function(){
- function addEvent( node, type, listener ) {
- if (node.addEventListener) {
- // W3C method
- node.addEventListener( type, listener, false );
- return true;
- } else if(node.attachEvent) {
- // MSIE method
- node['e'+type+listener] = listener;
- node[type+listener] = function(){node['e'+type+listener]( window.event );}
- node.attachEvent( 'on'+type, node[type+listener] );
- return true;
- }
- // Didn't have either so return false
- return false;
- };
- var submit=document.forms["myform"];
- addEvent(submit,'submit',startUpload);
- var begin;
- var request;
- var rdm;
- var pec=document.getElementById("pecent");
- function startUpload()
- {
- rdm=Math.floor(Math.random()*100000000);
- document.getElementById('remark').setAttribute('value',rdm);
- document.getElementById("progress").style['display']='block';
- //creatXmlHttpRequest();
- begin=setTimeout(doRequest,1000);
- };
- function creatXmlHttpRequest()
- {
- if(window.ActiveXObject)
- {request=new ActiveXObject("Microsoft.XMLHTTP")}
- else{request=new XMLHttpRequest();}
- };
- var count=0;
- function doRequest()
- {
- if(window.ActiveXObject)
- {request=new ActiveXObject("Microsoft.XMLHTTP");}
- else{request=new XMLHttpRequest();}
- if(request!=null){
- request.onreadystatechange=handle;
- request.open("GET","upload.php?key="+rdm+"&sim=" + (++count),true);
- request.send();
- }
- };
- function handle()
- {
- if(request.readyState==4&&request.status==200)
- {
- //接受服务器数据
- var prgs=eval("(" + request.responseText + ")");
- //var prgs=request.responseText;
- var cur=parseInt(prgs.current);
- var total=parseInt(prgs.total);
- var pecentIs=Math.round(cur/total*100);
- pec.innerHTML=pecentIs.toString()+"%";
- if(100==pecentIs)
- {
- pec.style['width']="200px";
- clearTimeout(begin);
- }else{
- begin=setTimeout(doRequest,1000);
- //alert(pecentIs);
- pec.style['width']=pecentIs*2;
- }
- }
- };
- })();
- </script>
- </body>
- </html>
2后台upload.php文件代码：
Php代码
- <?php
- /*
- * Created on 2010-4-16
- *
- * To change the template for this generated file go to
- * Window - Preferences - PHPeclipse - PHP - Code Templates
- */
- if ($_SERVER['REQUEST_METHOD'] == 'POST'){
- $myfile=$_FILES['upfile'];
- echo $myfile['size'];
- echo $myfile['size'];
- print_r($myfile);
- $tempf=$myfile['tmp_name'];
- $name=$myfile['name'];
- move_uploaded_file($tempf,'up/'.$name);}
- if(isset($_GET['key']))
- {
- //header('Content-Type:application/json; charset=utf-8' ) ;
- // Retrieve the status using the getStatus() function below
- //echo json_encode(getStatusAPC());
- echo json_encode(getStatusAPC());
- }
- function getStatusAPC()
- {
- $response=false;
- if($status = apc_fetch('upload_'.$_GET['key'])) {
- $response=apc_fetch('upload_'.$_GET['key']);
- }
- return $response;
- }
- ?>
问题总结：
1，使用setTimeout嵌套和setInterval有区别，用前者效果较好，用后者的话由于请求和返回的时间比较随机，时间间隔把握不好的话，程序会比较混乱，结果往往不正确。
2.发送Ajax请求时每次都要重新实例化xmlhttprequest对象而不能用上次实例化的，否则程序在ie下无法执行，在火狐下可以运行
