php檔案上傳進(jìn)度處理

當(dāng)檔案過(guò)大，或使用者網(wǎng)路狀態(tài)一般，通常上傳過(guò)程需要一段時(shí)間，如果這時(shí)候讓使用者白屏等待的話，相信大部分使用者都會(huì)直接關(guān)掉應(yīng)用，所以一個(gè)監(jiān)控上傳進(jìn)度，並即時(shí)向用戶報(bào)告的需求就被產(chǎn)品汪擺在了桌面上。一個(gè)高逼格的上傳進(jìn)度提示，會(huì)讓你的應(yīng)用程式瞬間變成被仰望的存在。

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

注意：本章學(xué)習(xí)需要有session基礎(chǔ)和javascript和ajax基礎(chǔ)。

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

##說(shuō)明#session.upload_progress.enabled#是否啟用上傳進(jìn)度報(bào)告(預(yù)設(shè)開啟) 1為開啟，0為關(guān)閉#session.upload_progress.cleanup是否在上傳完成後及時(shí)刪除進(jìn)度資料(預(yù)設(shè)為開啟,推薦開啟)session.upload_progress.prefix[=upload_progress_ ]進(jìn)度數(shù)據(jù)將存儲(chǔ)在_SESSION[session.upload_progress.prefix . _POST[session.upload_progress.name]]session.upload_progress.name[=PHP_SESSION_UPLOAD_PROGRESS ]如果_POST[session.upload_progress.name]沒有被設(shè)定, 則不會(huì)報(bào)告進(jìn)度.session.upload_progress.freq[=1%]更新進(jìn)度的頻率(已經(jīng)處理過(guò)的位元組數(shù)), 也支援百分比表示'%'.session.upload_progress.min_freq[=1.0]更新進(jìn)度的時(shí)間間隔(秒)#

開啟了配置，我們可以透過(guò)session，來(lái)記錄一個(gè)完整的檔案上傳進(jìn)度。在session中，會(huì)出現(xiàn)一個(gè)如下結(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,
      ),
     )
    );

這個(gè)陣列詳細(xì)記錄了檔案上傳的進(jìn)度，已經(jīng)處理完的檔案狀態(tài)為true。下面，我們透過(guò)一個(gè)jQuery的AJAX實(shí)例，來(lái)學(xué)習(xí)一下檔案上傳進(jìn)度的流程。

首先，在表單中，需要新增一個(gè)type=hidden 的input 標(biāo)籤，標(biāo)籤value 為自訂（建議使用有一定意義的值，因?yàn)檫@個(gè)值將會(huì)在背景使用到）

<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>

這裡，新增了一個(gè)ID為progress的div，作為展示上傳進(jìn)度的容器。我們透過(guò)js的setTimeout()，定時(shí)執(zhí)行ajax來(lái)取得檔案上傳進(jìn)度，後臺(tái)檔案?jìng)骰貦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>

上面這段程式碼，就是透過(guò)JQ的ajax，每0.1秒回傳一次檔案上傳進(jìn)度。並把進(jìn)度百分比在div 標(biāo)籤中顯示。

後臺(tái)程式碼，需要分成兩個(gè)部分，upload.php處理上傳檔案。 progress.php 取得session中的上傳進(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)到指定位置
}
?>

主要關(guān)注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文件中定義的前綴 拼接 傳過(guò)來(lái)的參數(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;                                                       
}
?>

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

繼續(xù)學(xué)習(xí)

新建檔案

<?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文件中定義的前綴拼接傳過(guò)來(lái)的參數(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; } ?>

提交重置程式碼

自動(dòng)運(yùn)行

教程列表

獲取幫助