开发者社区> y0umer> 正文

php实现文件上传进度条

简介:  在PHP5.4以前, 我们可以通过APC提供的功能来实现. 或者使用PECL扩展uploadprogress来实现. 虽然说, 它们能很好的解决现在的问题, 但是也有很明显的不足: 1.
+关注继续查看

 在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代码  收藏代码
  1. <html>  
  2. <title>PHP+Ajax带进度条文件上传</title>  
  3. <head>  
  4. <style type="text/css">  
  5. #progress{  
  6. border:2px red solid;  
  7. width:200px;  
  8. height:20px;  
  9. display:none;  
  10. }  
  11.   
  12. #pecent{  
  13. background-color:green;  
  14. display:block;  
  15. width:0px;  
  16. height:20px;  
  17. color:yellow;  
  18. }  
  19. </style>  
  20. </head>  
  21. <body>  
  22.     <iframe style="display:none" name="ifm"></iframe>  
  23.       <form enctype="multipart/form-data" method="POST" action="upload.php" target="ifm" name="myform">  
  24.       <input type="hidden" name="APC_UPLOAD_PROGRESS" id="remark" >  
  25.       <input type="file" name="upfile"/>  
  26.       <input type="submit" value="上传" name="sub"/>  
  27.       </form>  
  28.       <div id="progress" class="before"><span id="pecent"></span></div>  
  29.   
  30. <script type="text/javascript">  
  31. (function(){  
  32.     function addEvent( node, type, listener ) {  
  33.     if (node.addEventListener) {  
  34.         // W3C method  
  35.         node.addEventListener( type, listener, false );  
  36.         return true;  
  37.     } else if(node.attachEvent) {  
  38.         // MSIE method  
  39.         node['e'+type+listener] = listener;  
  40.         node[type+listener] = function(){node['e'+type+listener]( window.event );}  
  41.         node.attachEvent( 'on'+type, node[type+listener] );  
  42.         return true;  
  43.     }  
  44.     // Didn't have either so return false  
  45.     return false;  
  46.     };  
  47.     var submit=document.forms["myform"];  
  48.     addEvent(submit,'submit',startUpload);  
  49.     var begin;  
  50.     var request;  
  51.     var rdm;  
  52.     var pec=document.getElementById("pecent");  
  53.     function startUpload()  
  54.     {  
  55.         rdm=Math.floor(Math.random()*100000000);  
  56.         document.getElementById('remark').setAttribute('value',rdm);  
  57.         document.getElementById("progress").style['display']='block';  
  58.         //creatXmlHttpRequest();  
  59.         begin=setTimeout(doRequest,1000);  
  60.     };  
  61.     function creatXmlHttpRequest()  
  62.     {  
  63.         if(window.ActiveXObject)  
  64.         {request=new ActiveXObject("Microsoft.XMLHTTP")}  
  65.         else{request=new XMLHttpRequest();}  
  66.     };  
  67.     var count=0;  
  68.     function doRequest()  
  69.    {  
  70.        if(window.ActiveXObject)  
  71.         {request=new ActiveXObject("Microsoft.XMLHTTP");}  
  72.         else{request=new XMLHttpRequest();}  
  73.   
  74.        if(request!=null){  
  75.        request.onreadystatechange=handle;  
  76.        request.open("GET","upload.php?key="+rdm+"&sim=" + (++count),true);  
  77.        request.send();  
  78.        }  
  79.    };  
  80.         function handle()  
  81.         {  
  82.             if(request.readyState==4&&request.status==200)  
  83.             {  
  84.                 //接受服务器数据  
  85.                 var prgs=eval("(" +  request.responseText + ")");  
  86.                 //var prgs=request.responseText;  
  87.                 var cur=parseInt(prgs.current);  
  88.                 var total=parseInt(prgs.total);  
  89.                 var pecentIs=Math.round(cur/total*100);  
  90.                 pec.innerHTML=pecentIs.toString()+"%";  
  91.                 if(100==pecentIs)  
  92.                 {  
  93.                     pec.style['width']="200px";  
  94.                     clearTimeout(begin);  
  95.                 }else{  
  96.                     begin=setTimeout(doRequest,1000);  
  97.                     //alert(pecentIs);  
  98.                     pec.style['width']=pecentIs*2;  
  99.                 }  
  100.             }  
  101.         };  
  102.     })();  
  103.     </script>  
  104.     </body>  
  105. </html>  

 

2后台upload.php文件代码:

Php代码  收藏代码
  1. <?php  
  2. /* 
  3.  * Created on 2010-4-16 
  4.  * 
  5.  * To change the template for this generated file go to 
  6.  * Window - Preferences - PHPeclipse - PHP - Code Templates 
  7.  */  
  8.  if ($_SERVER['REQUEST_METHOD'] == 'POST'){  
  9. $myfile=$_FILES['upfile'];  
  10. echo $myfile['size'];  
  11. echo $myfile['size'];  
  12. print_r($myfile);  
  13. $tempf=$myfile['tmp_name'];  
  14. $name=$myfile['name'];  
  15. move_uploaded_file($tempf,'up/'.$name);}  
  16.   
  17. if(isset($_GET['key']))  
  18. {  
  19.     //header('Content-Type:application/json; charset=utf-8' ) ;  
  20.     // Retrieve the status using the getStatus() function below  
  21.     //echo json_encode(getStatusAPC());  
  22.     echo json_encode(getStatusAPC());  
  23. }  
  24. function getStatusAPC()  
  25. {  
  26.     $response=false;  
  27.     if($status = apc_fetch('upload_'.$_GET['key'])) {  
  28.           
  29.         $response=apc_fetch('upload_'.$_GET['key']);  
  30.           
  31.     }  
  32.     return $response;  
  33. }  
  34.   
  35. ?>  

 问题总结:

1,使用setTimeout嵌套和setInterval有区别,用前者效果较好,用后者的话由于请求和返回的时间比较随机,时间间隔把握不好的话,程序会比较混乱,结果往往不正确。

2.发送Ajax请求时每次都要重新实例化xmlhttprequest对象而不能用上次实例化的,否则程序在ie下无法执行,在火狐下可以运行

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
java file 进度条 文件上传
java  file 进度条     public class MyProgressListener implements ProgressListener { private HttpSession session; public MyProgressLis...
664 0
JS实现上传进度条
文件上传的时候经常需要等待,这个时候可以考虑增加进度条来实现这个技术,下面主要是使用js模拟进度条,记住这是模拟进度条,不是真实的进度条,因为如果是真实的进度条需要实现获取文件的真实大小,以及监听每时每刻文件上传的大小,获得这些数据后,还需要使用js技术把数据传递到前端,貌似目前 哥哥还实现不了这个...
1453 0
PHP文件上传源码分析(RFC1867)
文件上传,一般分为俩种方式FTP和HTTP, 对于我们的互联网应用来说: FTP上传虽然传输稳定, 但是易用性和安全性都是个问题.
831 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18198 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24880 0
赞!带进度条的 jQuery 文件拖放上传插件
  jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果。作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 Hack 的方式使之兼容那些古老的浏览器。
823 0
WPF下载远程文件,并显示进度条和百分比
原文:WPF下载远程文件,并显示进度条和百分比 WPF下载远程文件,并显示进度条和百分比 1、xaml  2、CS程序 using System; using System.
1186 0
PHP文件上传中的安全问题
在使用PHP进行开发时,经常遇到文件上传的场景。其中会隐藏很多我们平时注意不到的安全问题,我总结了一下,主要有几个方面:1、检查用户传来的文件名,避免 ../etc/passwd 这样的探测2、有些应用使用了用户名做为路径名,那么也需要对用户名进行详细的检查3、有些人提到了文件上传的Dos攻击,这个我觉得主要是依靠网络层面去解决,禁掉频繁访问的IP,但是对于僵尸网络的攻击,貌似没什么好的办法下面这篇文章中介绍的内容有些老,因为现在已经不是PHP3和PHP4的那个时代,虽然如此,关于文件上传中的安全处理,我们还是需要多加注意。
817 0
+关注
y0umer
高级网络安全技术员
906
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载