使用PHP的APC模块制作上传进度条

2007-9-15  08:50

现在做的这个项目中有上传功能,感觉以前的上传代码已经跟不上时代的发展潮流了,从用户体验来讲做个进度条效果是十分有必要的,特别是当在上传视频等大文件的时候更是如此。最近结合PHP的APC模块和Jquery完成了文件的上传进度条效果。

最后完成的效果图:

php上传进度条


好像PHP一直以来都没有在上传进度这方面有所突破。昨天找到了一个PHP的叫 APC模块,它的全称是Alternative PHP Cache。APC可以将所有PHP代码会被缓存起来, 另外它可提供一定的内存缓存功能.但是这个功能并不是十分完美,有报告说如果频繁使用APC缓存的写入功能,会导致不可预料的错误.如果想使用这个功能,可以看看apc_fetch,apc_store等几个与apc缓存相关的函数.

值得高兴的是从5.2开始APC加入了一个叫APC_UPLOAD_PROGRESS的东东,解决了困扰大家已久的进度条问题。并且它把原来的上传时把临时文件全部缓存到内存改成了当临时文件达到设定值时就自动保存到硬盘,有效地改善了内存利用状况。

它的作用原理是在上传时候赋予每个上传一个唯一的ID,当 PHP 脚本收到一个上传文件时,解释程序将自动检查 $_POST数组中名为 APC_UPLOAD_PROGRESS 的隐藏字段,它将成为缓存变量,存储关于上传的信息,这样脚本就可以通过上传的ID来访问上传文件的状态信息。

在使用过程中我还遇到了点小麻烦,我想的是都用XMLHttpRequest来操作,这样的话一个页面就需要两个XMLHttpRequest对象,默认情况下XMLHttpRequest是只存在一个的,不加以区分的话后面的回将前面的覆盖。我看着程序报错,但一直没有意识到是这个问题,于是浪费了好多时间,搞明白以后呢我又不知道怎么在一个页面中同时使用多个XMLHttpRequest对象,查了半天也没有闹明白。唉,真是死脑筋啊,为什么非要用XMLHttpRequest呢,上传完全可以不用嘛,猪啊~~~~

这样搞起来就比较简单了:

 

XML/HTML代码
  1. <!–以下为上传表单–>
  2. <form enctype="multipart/form-data" id="upload_form" action="" method="POST">
  3. <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="upid"/>
  4. 视频标题:<input type="text" id="subject" name="subject"/><br/>
  5. 视频说明:<input type="text" id="content" name="content"/><br/>
  6. 视频TAG(以逗号分割)<input type="text" id="tag" name="tags"/><br/>
  7. <input type="file" id="upfile" name="upfile"/><br/><br/>
  8. <input type="submit" id="filesubmit" value="上传" onclick="startProgress(’upid’); return true;"/>
  9. <!–注意:startProgress(’upid’)中的参数是你从php中分配的唯一上传参数–>
  10. </form>
  11. <!–以下为上传进度条–>
  12. <div id="upstatus" style="width: 500px; height: 30px; border: 1px solid ##ffffde; color:#796140;">
  13. </div
  14. <div id="progressouter" style="width: 500px; height: 20px; border: 3px solid #de7e00; display:none;">
  15. <div id="progressinner" style="position: relative; height: 20px; color:#796140; background-color: #f6d095; width: 0%; "></div>
  16. </div>

 

最主要的就是那个APC_UPLOAD_PROGRESS的隐藏域,有了它脚本才能去访问目前上传文件的状态,另外加一个显示上传状态的div就好了。

下面是处理Ajax的脚本,我用了Jquery框架,json传递消息。

 

JavaScript代码

     

     

  1. function getProgress(upid){
  2. var url = "<{$siteurl}>epadmin/upprocess";
  3. $.getJSON(
  4. url,
  5. { progress_key: upid },
  6. function(json){
  7. $("#progressinner").width(json.per+"%");
  8. $("#upstatus").html(‘文件大小:’+json.total+‘KB’+‘ 已上传:’+json.current+‘KB’);
  9. if (json.per < 100){
  10. setTimeout(function(){
  11. getProgress(upid);
  12. }, 10);
  13. }else{
  14. $("#upstatus").html("视频上传完成,正在处理数据,请稍后……");
  15. }
  16. }
  17. )
  18. }
  19. function startProgress(upid){
  20. $("#progressouter").css({ display:"block" });
  21. setTimeout(function(){
  22. getProgress(upid);
  23. }, 100);
  24. }

 

再下来就是读取上传状态的PHP代码了,至于上传文件的处理可以按照平常自己的来写.

 

PHP代码
  1. //上传文件操作函数,可按照自己的需要编写
  2. function upflvAction()
  3. {
  4. if($_SERVER['REQUEST_METHOD']==‘POST’){
  5. $subject = trim($this->f->filter($this->_request->getPost(’subject’)));
  6. $content = trim($this->f->filter($this->_request->getPost(‘content’)));
  7. Zend_Loader::loadClass(‘Custom_FlvOp’);
  8. $flv = new Custom_FlvOp;
  9. $flv->uploadFlv(‘upfile’,$subject,$content);
  10. }
  11. }
  12. //这就是读取上传状态的函数了~~
  13. function upprocessAction()
  14. {
  15. if(isset($_GET['progress_key'])) {
  16. $status = apc_fetch(‘upload_’.$_GET['progress_key']);
  17. $json = array(
  18. ‘per’=>$status['current']/$status['total']*100,
  19. ‘total’=>round($status['total']/1024),
  20. ‘current’=>round($status['current']/1024),
  21. );
  22. require_once("Zend/Json.php");
  23. echo Zend_Json::encode($json);
  24. }
  25. }

 

好了,现在就可以将其部署自己的站点中了,自己看看效果是不是很酷?

此文一共有2条留言

  1. Jeffery:

    2008-4-24 17:40:17

    嗯,完整的例子,明天上班来看。
    忽然发现PHP可以用APC来实现实时进度条,比较不错。

  2. sharmy:

    2008-4-24 18:00:59

    呵呵,现在貌似APC已经被加入PHP的核心了。

发表评论