Question

当文件过大，或者用户网络状态一般，通常上传过程需要一段时间，如果这时候让用户白屏等待的话，相信大部分用户都会直接关掉应用，所以一个监控上传进度，并实时向用户报告的需求就被产品汪摆在了桌面上。一个高逼格的上传进度提示，会让你的应用瞬间变成被仰望的存在。
PHP 在 5.4 之前，总是需要安装额外的扩展才能监控到文件上传进度。而从 5.4 开始，引入 session.upload_progress 的新特性，我们只需要在 php.ini 中开启配置，即可通过 session 监控文件上传进度。在 php.ini 中。

注意：本章学习需要有 session 基础和 javascript 和 ajax 基础。

我们需要配置，注意查看和修改 php.ini 文件：

配置项	说明
session.upload_progress.enabled	是否启用上传进度报告（默认开启) 1 为开启，0 为关闭
session.upload_progress.cleanup	是否在上传完成后及时删除进度数据（默认开启，推荐开启)
session.upload_progress.prefix[=uploadprogress]	进度数据将存储在_SESSION[session.upload_progress.prefix . _POST[session.upload_progress.name]]
session.upload_progress.name[=PHP_SESSION_UPLOAD_PROGRESS]	如果_POST[session.upload_progress.name]没有被设置，则不会报告进度。
session.upload_progress.freq[=1%]	更新进度的频率（已经处理的字节数), 也支持百分比表示’%’.
session.upload_progress.min_freq[=1.0]	更新进度的时间间隔（秒级)

开启了配置，我们可以通过 session，来记录一个完整的文件上传进度。在 session 中，会出现一个如下结果的数组：

 $_SESSION["upload_progress_test"] = array(
//请求时间
 "start_time" => 1234567890,
 // 上传文件总大小
 "content_length" => 57343257,
 //已经处理的大小
 "bytes_processed" => 453489,
 //当所有上传处理完成后为 TRUE，未完成为 false
 "done" => false,

 "files" => array(
  0 => array(
  //表单中上传框的名字

   "field_name" => "file1",

   //上传文件的名称
   "name" => "test1.avi",

   //缓存文件，上传的文件即保存在这里
   "tmp_name" => "/tmp/phpxxxxxx",

   //文件上传的错误信息
   "error" => 0,

   //是否上传完成，当这个文件处理完成后会变成 TRUE
   "done" => true, 

   //这个文件开始处理时间
   "start_time" => 1234567890,

   //这个文件已经处理的大小
   "bytes_processed" => 57343250,   
  ),

  1 => array(
   "field_name" => "file2",
   "name" => "test2.avi",
   "tmp_name" => NULL,
   "error" => 0,
   "done" => false,         
   "start_time" => 1234567899,
   "bytes_processed" => 54554,
  ),
 )
);

这个数组详细记录了文件上传的进度，已经处理完的文件状态为 true。下面，我们通过一个 jQuery 的 AJAX 实例，来学习一下文件上传进度的流程。

首先，在表单中，需要添加一个 type=hidden 的 input 标签，标签 value 为自定义（建议使用有一定意义的值，因为这个值将要在后台用到）

<form id="upload-form" action="upload.php" method="POST" enctype="multipart/form-data" style="margin:15px 0" target="hidden_iframe">
<input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="test" />
<p><input type="file" name="file1" /></p>
<p><input type="submit" value="Upload" /></p>
</form>
<div id="progress" class="progress" style="margin-bottom:15px;display:none;">
<div class="label">0%</div>
</div>

这里，添加了一个 ID 为 progress 的 div，作为展示上传进度的容器。我们通过 js 的 setTimeout()，定时执行 ajax 来获取文件上传进度，后台文件返回文件上传的进度百分比。

<script src="../jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function fetch_progress(){
$.get('progress.php',{ '<?php echo ini_get("session.upload_progress.name"); ?>' : 'test'}, function(data){
  var progress = parseInt(data);
  $('#progress .label').html(progress + '%');
  if(progress < 100){
    setTimeout('fetch_progress()', 100);  //当上传进度小于 100%时，显示上传百分比
  }else{
    $('#progress .label').html('完成!');  //当上传进度等于 100%时，显示上传完成
  }
}, 'html');
}

$('#upload-form').submit(function(){
$('#progress').show();
setTimeout('fetch_progress()', 100);//每 0.1 秒执行一次 fetch_progress()，查询文件上传进度
});
</script> 

上面这段代码，就是通过 JQ 的 ajax，每 0.1 秒返回一次文件上传进度。并把进度百分比在 div 标签中显示。

后台代码，需要分为两个部分，upload.php 处理上传文件。progress.php 获取 session 中的上传进度，并返回进度百分比。

这里文件上传就不再赘述，详细步骤参见上文，upload.php:

<?php
if(is_uploaded_file($_FILES['file1']['tmp_name'])){                     //判断是否是上传文件
//unlink($_FILES['file1']['tmp_name']); 
move_uploaded_file($_FILES['file1']['tmp_name'], "./{$_FILES['file1']['name']}");     //将缓存文件移动到指定位置
}
?>

主要关注 progress.php：

<?php
/*
开启 session。请注意在 session_start() 之前，请不要有想浏览器输出内容的动作，否则可能引起错误。
*/

session_start();

//ini_get() 获取 php.ini 中环境变量的值
$i = ini_get('session.upload_progress.name');

//ajax 中我们使用的是 get 方法，变量名称为 ini 文件中定义的前缀 拼接 传过来的参数
$key = ini_get("session.upload_progress.prefix") . $_GET[$i];   
//判断 SESSION 中是否有上传文件的信息
if (!empty($_SESSION[$key])) {                    
//已上传大小
$current = $_SESSION[$key]["bytes_processed"];
//文件总大小
$total = $_SESSION[$key]["content_length"];

//向 ajax 返回当前的上传进度百分比。
echo $current < $total ? ceil($current / $total * 100) : 100;
}else{
echo 100;                             
}
?>

到这里，文件进度的代码就已经完成了，配合前端，我们就可以做一个炫酷的文件上传功能啦！