php檔案上傳進度處理

當檔案過大，或使用者網路狀態一般，通常上傳過程需要一段時間，如果這時候讓使用者白屏等待的話，相信大部分使用者都會直接關掉應用，所以一個監控上傳進度，並即時向用戶報告的需求就被產品汪擺在了桌面上。一個高逼格的上傳進度提示，會讓你的應用程式瞬間變成被仰望的存在。

PHP在5.4之前，總是需要安裝額外的擴充功能才能監控到檔案上傳進度。而從5.4開始，引入session.upload_progress的新特性，我們只需要在php.ini開啟配置，即可透過session監控檔案上傳進度。在php.ini中。

注意：本章學習需要有session基礎和javascript和ajax基礎。

我們需要配置，注意查看和修改php.ini檔案：

開啟了配置，我們可以透過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;                                                       
}
?>

到這裡，檔案進度的程式碼就已經完成了，配合前端，我們就可以做一個酷炫的檔案上傳功能啦！

暫無