ファイルが大きすぎる場(chǎng)合、またはユーザーのネットワーク狀態(tài)が平均的な場(chǎng)合、通常、アップロードプロセスに時(shí)間がかかります。この時(shí)點(diǎn)でユーザーが空白の畫面で待たされた場(chǎng)合、ほとんどのユーザーはアプリケーションを直接終了すると思います。アップロードの進(jìn)行狀況を監(jiān)視し、リアルタイムでユーザーにレポートします。レポートの必要性は Product Wang によって検討されました。高品質(zhì)のアップロード進(jìn)行狀況プロンプトにより、アプリは即座に優(yōu)れたものになります。

PHP 5.4 より前は、ファイルのアップロードの進(jìn)行狀況を監(jiān)視するには、常に追加の拡張機(jī)能をインストールする必要がありました。 5.4 からは、session.upload_progress の新機(jī)能が導(dǎo)入されています。セッションを通じてファイルのアップロードの進(jìn)行狀況を監(jiān)視するには、php.ini の設(shè)定を有効にするだけです。 php.ini內(nèi)。

注: この章を?qū)W習(xí)するには、セッション、JavaScript、Ajax に関する基本的な知識(shí)が必要です。

php.iniファイルを設(shè)定し、チェックと変更に注意する必要があります:

設(shè)定を有効にすると、セッションを通じて完全なファイルアップロードの進(jìn)行狀況を記録できます。セッションでは、次の結(jié)果を含む配列が表示されます:

$_SESSION["upload_progress_test"] = array(
    //請(qǐng)求時(shí)間
     "start_time" => 1234567890,
     // 上傳文件總大小
     "content_length" => 57343257,
     //已經(jīng)處理的大小
     "bytes_processed" => 453489,
     //當(dāng)所有上傳處理完成后為TRUE，未完成為false
     "done" => false,
     "files" => array(
      0 => array(
        //表單中上傳框的名字
       "field_name" => "file1",
       //上傳文件的名稱
       "name" => "test1.avi",
       //緩存文件，上傳的文件即保存在這里
       "tmp_name" => "/tmp/phpxxxxxx",
       //文件上傳的錯(cuò)誤信息
       "error" => 0,
       //是否上傳完成，當(dāng)這個(gè)文件處理完成后會(huì)變成TRUE
       "done" => true, 
       //這個(gè)文件開始處理時(shí)間
       "start_time" => 1234567890,
       //這個(gè)文件已經(jīng)處理的大小
       "bytes_processed" => 57343250,     
      ),
      1 => array(
       "field_name" => "file2",
       "name" => "test2.avi",
       "tmp_name" => NULL,
       "error" => 0,
       "done" => false,                    
       "start_time" => 1234567899,
       "bytes_processed" => 54554,
      ),
     )
    );

この配列は、ファイルのアップロードの進(jìn)行狀況を詳細(xì)に記録し、処理されたファイルのステータスは true です。次に、jQuery AJAX の例を使用して、ファイルのアップロードの進(jìn)行プロセスを?qū)W習(xí)します。

まず、フォームに type=hidden の input タグを追加する必要があります。タグの値はカスタマイズされます (この値はバックグラウンドで使用されるため、意味のある値を使用することをお?jiǎng)幛幛筏蓼?

<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 が追加されます。これは、アップロードの進(jìn)行狀況を表示するコンテナとして使用される進(jìn)行狀況 div です。 js の setTimeout() を使用して ajax を定期的に実行し、ファイルのアップロードの進(jìn)行狀況を取得します。バックグラウンド ファイルはファイル アップロードの進(jìn)行狀況のパーセンテージを返します。

<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);    //當(dāng)上傳進(jìn)度小于100%時(shí)，顯示上傳百分比
        }else{
            $('#progress .label').html('完成!'); //當(dāng)上傳進(jìn)度等于100%時(shí)，顯示上傳完成
        }
    }, 'html');
}
$('#upload-form').submit(function(){
    $('#progress').show();
    setTimeout('fetch_progress()', 100);//每0.1秒執(zhí)行一次fetch_progress()，查詢文件上傳進(jìn)度
});
</script>

上記のコードは、JQ の ajax を使用して、ファイルのアップロードの進(jìn)行狀況を 0.1 秒ごとに返します。そして、divタグに進(jìn)捗率を表示します。

バックグラウンド コードは 2 つの部分に分割する必要があります。upload.php はファイルのアップロードを処理します。 progress.php はセッション內(nèi)のアップロードの進(jìn)行狀況を取得し、進(jìn)行狀況のパーセンテージを返します。

ここではファイルのアップロードについては詳しく説明しません。詳細(xì)な手順については上記を參照してください。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']}");     //將緩存文件移動(dòng)到指定位置
}
?>

主に progress.php:

<?php
/*
開啟session。請(qǐng)注意在session_start()之前，請(qǐng)不要有想瀏覽器輸出內(nèi)容的動(dòng)作，否則可能引起錯(cuò)誤。
*/

session_start();

//ini_get()獲取php.ini中環(huán)境變量的值
$i = ini_get('session.upload_progress.name');

//ajax中我們使用的是get方法，變量名稱為ini文件中定義的前綴 拼接 傳過來的參數(shù)
$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 返回當(dāng)前的上傳進(jìn)度百分比。
   echo $current < $total ? ceil($current / $total * 100) : 100;
}else{
   echo 100;                                                       
}
?>

この時(shí)點(diǎn)で、ファイルの進(jìn)行狀況コードは次のようになります。フロントエンドを使用すると、クールなファイルアップロード機(jī)能が作成できます。