當檔案過大，或使用者網(wǎng)路狀態(tài)一般，通常上傳過程需要一段時間，如果這時候讓使用者白屏等待的話，相信大部分使用者都會直接關掉應用，所以一個監(jiān)控上傳進度，並即時向用戶報告的需求就被產(chǎn)品汪擺在了桌面上。一個高逼格的上傳進度提示，會讓你的應用程式瞬間變成被仰望的存在。
PHP在5.4之前，總是需要安裝額外的擴充功能才能監(jiān)控到檔案上傳進度。而從5.4開始，引入session.upload_progress的新特性，我們只需要在php.ini開啟配置，即可透過session監(jiān)控檔案上傳進度。在php.ini中。
注意：本章學習需要有session基礎和javascript和ajax基礎。
我們需要配置，注意查看和修改php.ini檔案：
| #設定項 | ##說明 |
|---|
#session.upload_progress.enabled | #是否啟用上傳進度報告(預設開啟) 1為開啟，0為關閉 |
#session.upload_progress.cleanup | 是否在上傳完成後及時刪除進度資料(預設為開啟,推薦開啟) |
session.upload_progress.prefix[=upload_progress_ ] | 進度數(shù)據(jù)將存儲在_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%] | 更新進度的頻率(已經(jīng)處理過的位元組數(shù)), 也支援百分比表示'%'. |
session.upload_progress.min_freq[=1.0]| | 更新進度的時間間隔(秒) |
#開啟了配置，我們可以透過session，來記錄一個完整的檔案上傳進度。在session中，會出現(xiàn)一個如下結(jié)果的陣列：
$_SESSION["upload_progress_test"] = array(
//請求時間
"start_time" => 1234567890,
// 上傳文件總大小
"content_length" => 57343257,
//已經(jīng)處理的大小
"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,
//這個文件已經(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īng)處理完的檔案狀態(tài)為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()，定時執(zhí)行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秒執(zhí)行一次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()之前，請不要有想瀏覽器輸出內(nèi)容的動作，否則可能引起錯誤。
*/
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 返回當前的上傳進度百分比。
echo $current < $total ? ceil($current / $total * 100) : 100;
}else{
echo 100;
}
?>到這裡，檔案進度的程式碼就已經(jīng)完成了，配合前端，我們就可以做一個酷炫的檔案上傳功能啦！
<?php
/*
開啟session。請注意在session_start()之前，請不要有想瀏覽器輸出內(nèi)容的動作，否則可能引起錯誤。
*/
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 返回當前的上傳進度百分比。
echo $current < $total ? ceil($current / $total * 100) : 100;
}else{
echo 100;
}
?>
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~
