向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.

本来这篇文章早应该写了，由于其他原因一直没有时间完成。这两天抽空写了一个简单的版本，发出来大家一块学习吧。

prerequire:
php >5.2*
APC
jquery
add below to your php.ini

extension="/usr/local/php5212/lib/php/extensions/no-debug-zts-20060613/apc.so"
apc.rfc1867 = On
apc.enabled=1                       # default = 1
apc.shm_segments=1                  # default = 1
apc.shm_size=128                    # default = 30
apc.ttl=7200                        # default = 0
apc.user_ttl=7200                   # default = 0
apc.num_files_hint=1024             # default = 1000
apc.mmap_file_mask=/tmp/apc.XXXXXX  # default = no value
apc.enable_cli=1                    # default = 0

program details:total 4 files (3 php and 1 js )
upload.php        //程序的入口，生成表单以及调用js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
<script src="upload.js" type="text/javascript"></script>
<?php
   $unique_id = uniqid("");
?>

<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 $unique_id;?>"/>
<input type="file" id="test_file" name="test_file"/><br/>
<input  type="submit" value="Upload!" onclick="startProgress('<?php echo $unique_id;?>');return true;"/>
</form>

<div id="upstatus" style="width: 500px; height: 30px; border: 0px solid ##ffffde; color:#796140;"></div>
<div id="progressouter" style="width: 500px; height: 20px; border: 3px solid #de7e00; display:none;">
<div id="progressinner" style="position: relative; height: 20px; color:#796140; background-color: #f6d095; width: 0%; "></div>
</div>
ProcessBar.php  //ajax 请求的数据来源.
<?php
if(isset($_GET['progress_key'])) {
  $status = apc_fetch('upload_'.$_GET['progress_key']);
             $json = array(
                     'per'=>$status['current']/$status['total']*100,
                     'total'=>round($status['total']/1024),
                     'current'=>round($status['current']/1024)
                      );
$finalStatus= json_encode($json);
echo $finalStatus;
}
else
{
echo "You are bad man!!!";
}
?>
target.php //用于上传文件到相应的目录
<?php
$filepath = "images/";
$filepath = $filepath . basename( $_FILES['test_file']['name']);
move_uploaded_file($_FILES['test_file']['tmp_name'], $filepath);
echo "upload finish,please check your images directory!!!!";
?>
upload.js //本文用到的js

function getProgress(upid)
{
  var url = "ProcessBar.php";
  $.getJSON(
              url,
              { progress_key: upid },
              function(json){
                           $("#progressinner").width(json.per+"%");
                           $("#upstatus").html('filesize:'+json.total+'KB'+' '+'uploaded:'+json.current+'KB');
                           if (json.per < 100)
                           {
                                 setTimeout(function(){
                                  getProgress(upid);
                                  }, 10);
                           }
                           else
                           {
                           $("#upstatus").html("Upload finish,processing file,please wait a moment");
                            }
                            }
              )
}


function startProgress(upid)
{
$("#progressouter").css({ display:"block" });
setTimeout(function(){
getProgress(upid);
}, 100);
}

经过IE和Firefox的测试，完全可以运行。
来源:http://blog.sina.com.cn/s/blog_4d8a2c970100h7i9.html

再次可以参考：http://www.toplee.com/blog/463.html#comment-38076

用PHP Session和Javascript实现文件上传进度条：
PHP5.4后有原生态支持这个进度的功能，用的是Session实现的，感觉有点鸡肋，呵呵。
http://www.pureweber.com/article/php-upload-progress/
代码测试Ok：https://github.com/pureweber/samples/blob/master/php-upload-progress/upload.php
这玩意只支持Apache+PHP，对Nginx类的FastCGI没法获取到进度值，
所以，PHP还得加油啊，配置Apache下支持PHP的配置方法在这儿：
http://jackxiang.com/post/4155/  位于最后面。
最后，测试小文件的进度方法：QQPCNetFlow 网速限定后可看到进度，PHP接受完后这个$_FILES数组才出现了，这个tmp文件也就是最后一次成型，不能断点，是Http协议决定的。

作者：jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除
地址：https://jackxiang.com/post/2819/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！