php實現上傳文件時帶進度條

當文件過大，或者用戶網絡狀態一般，通常上傳過程需要一段時間，如果這時候讓用戶白屏等待的話，相信大部分用戶都會直接關掉應用，所以一個監控上傳進度，並實時向用戶報告的需求就被產品汪擺在了桌面上。一個高逼格的上傳進度提示，會讓你的應用瞬間變成被仰望的存在。 
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[=upload_progress_]	進度數據將存儲在_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;                                                       
    }
    ?>

到這里，文件進度的代碼就已經完成了，配合前端，我們就可以做一個炫酷的文件上傳功能啦！

轉自:http://blog.csdn.net/qq_14913213/article/details/54617238