设为首页收藏本站

UNIX技术社区

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
热搜: console
查看: 3414|回复: 0

php实现文件上传进度条

[复制链接]
发表于 2013-4-11 11:05:48 | 显示全部楼层 |阅读模式
在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!";}

运行效果截图
bc5cc048-1acd-376c-ae3c-0877878a76df.jpg
下面是源码
1 前台页面:
  1. <html>  
  2. 02.<title>PHP+Ajax带进度条文件上传</title>  
  3. 03.<head>  
  4. 04.<style type="text/css">  
  5. 05.#progress{  
  6. 06.border:2px red solid;  
  7. 07.width:200px;  
  8. 08.height:20px;  
  9. 09.display:none;  
  10. 10.}  
  11. 11.  
  12. 12.#pecent{  
  13. 13.background-color:green;  
  14. 14.display:block;  
  15. 15.width:0px;  
  16. 16.height:20px;  
  17. 17.color:yellow;  
  18. 18.}  
  19. 19.</style>  
  20. 20.</head>  
  21. 21.<body>  
  22. 22.    <iframe style="display:none" name="ifm"></iframe>  
  23. 23.      <form enctype="multipart/form-data" method="POST" action="upload.php" target="ifm" name="myform">  
  24. 24.      <input type="hidden" name="APC_UPLOAD_PROGRESS" id="remark" >  
  25. 25.      <input type="file" name="upfile"/>  
  26. 26.      <input type="submit" value="上传" name="sub"/>  
  27. 27.      </form>  
  28. 28.      <div id="progress" class="before"><span id="pecent"></span></div>  
  29. 29.  
  30. 30.<script type="text/javascript">  
  31. 31.(function(){  
  32. 32.    function addEvent( node, type, listener ) {  
  33. 33.    if (node.addEventListener) {  
  34. 34.        // W3C method  
  35. 35.        node.addEventListener( type, listener, false );  
  36. 36.        return true;  
  37. 37.    } else if(node.attachEvent) {  
  38. 38.        // MSIE method  
  39. 39.        node['e'+type+listener] = listener;  
  40. 40.        node[type+listener] = function(){node['e'+type+listener]( window.event );}  
  41. 41.        node.attachEvent( 'on'+type, node[type+listener] );  
  42. 42.        return true;  
  43. 43.    }  
  44. 44.    // Didn't have either so return false  
  45. 45.    return false;  
  46. 46.    };  
  47. 47.    var submit=document.forms["myform"];  
  48. 48.    addEvent(submit,'submit',startUpload);  
  49. 49.    var begin;  
  50. 50.    var request;  
  51. 51.    var rdm;  
  52. 52.    var pec=document.getElementById("pecent");  
  53. 53.    function startUpload()  
  54. 54.    {  
  55. 55.        rdm=Math.floor(Math.random()*100000000);  
  56. 56.        document.getElementById('remark').setAttribute('value',rdm);  
  57. 57.        document.getElementById("progress").style['display']='block';  
  58. 58.        //creatXmlHttpRequest();  
  59. 59.        begin=setTimeout(doRequest,1000);  
  60. 60.    };  
  61. 61.    function creatXmlHttpRequest()  
  62. 62.    {  
  63. 63.        if(window.ActiveXObject)  
  64. 64.        {request=new ActiveXObject("Microsoft.XMLHTTP")}  
  65. 65.        else{request=new XMLHttpRequest();}  
  66. 66.    };  
  67. 67.    var count=0;  
  68. 68.    function doRequest()  
  69. 69.   {  
  70. 70.       if(window.ActiveXObject)  
  71. 71.        {request=new ActiveXObject("Microsoft.XMLHTTP");}  
  72. 72.        else{request=new XMLHttpRequest();}  
  73. 73.  
  74. 74.       if(request!=null){  
  75. 75.       request.onreadystatechange=handle;  
  76. 76.       request.open("GET","upload.php?key="+rdm+"&sim=" + (++count),true);  
  77. 77.       request.send();  
  78. 78.       }  
  79. 79.   };  
  80. 80.        function handle()  
  81. 81.        {  
  82. 82.            if(request.readyState==4&&request.status==200)  
  83. 83.            {  
  84. 84.                //接受服务器数据  
  85. 85.                var prgs=eval("(" +  request.responseText + ")");  
  86. 86.                //var prgs=request.responseText;  
  87. 87.                var cur=parseInt(prgs.current);  
  88. 88.                var total=parseInt(prgs.total);  
  89. 89.                var pecentIs=Math.round(cur/total*100);  
  90. 90.                pec.innerHTML=pecentIs.toString()+"%";  
  91. 91.                if(100==pecentIs)  
  92. 92.                {  
  93. 93.                    pec.style['width']="200px";  
  94. 94.                    clearTimeout(begin);  
  95. 95.                }else{  
  96. 96.                    begin=setTimeout(doRequest,1000);  
  97. 97.                    //alert(pecentIs);  
  98. 98.                    pec.style['width']=pecentIs*2;  
  99. 99.                }  
  100. 100.            }  
  101. 101.        };  
  102. 102.    })();  
  103. 103.    </script>  
  104. 104.    </body>  
  105. 105.</html>  
复制代码
2后台upload.php文件代码:
  1. <?php  
  2. 02./*
  3. 03. * Created on 2010-4-16
  4. 04. *
  5. 05. * To change the template for this generated file go to
  6. 06. * Window - Preferences - PHPeclipse - PHP - Code Templates
  7. 07. */  
  8. 08. if ($_SERVER['REQUEST_METHOD'] == 'POST'){  
  9. 09.$myfile=$_FILES['upfile'];  
  10. 10.echo $myfile['size'];  
  11. 11.echo $myfile['size'];  
  12. 12.print_r($myfile);  
  13. 13.$tempf=$myfile['tmp_name'];  
  14. 14.$name=$myfile['name'];  
  15. 15.move_uploaded_file($tempf,'up/'.$name);}  
  16. 16.  
  17. 17.if(isset($_GET['key']))  
  18. 18.{  
  19. 19.    //header('Content-Type:application/json; charset=utf-8' ) ;  
  20. 20.    // Retrieve the status using the getStatus() function below  
  21. 21.    //echo json_encode(getStatusAPC());  
  22. 22.    echo json_encode(getStatusAPC());  
  23. 23.}  
  24. 24.function getStatusAPC()  
  25. 25.{  
  26. 26.    $response=false;  
  27. 27.    if($status = apc_fetch('upload_'.$_GET['key'])) {  
  28. 28.         
  29. 29.        $response=apc_fetch('upload_'.$_GET['key']);  
  30. 30.         
  31. 31.    }  
  32. 32.    return $response;  
  33. 33.}  
  34. 34.  
  35. 35.?>  
复制代码
问题总结:
1,使用setTimeout嵌套和setInterval有区别,用前者效果较好,用后者的话由于请求和返回的时间比较随机,时间间隔把握不好的话,程序会比较混乱,结果往往不正确。
2.发送Ajax请求时每次都要重新实例化xmlhttprequest对象而不能用上次实例化的,否则程序在ie下无法执行,在火狐下可以运行
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表