Web應用程式中常需要提供檔案上傳的功能。典型的場景包括使用者頭像上傳、相簿圖片上傳等。當需要上傳的檔案比較大的時候,提供一個顯示上傳進度的進度條就很有必要了。
在PHP 5.4以前,實作這樣的進度列並不容易,主要有三種方法:
使用Flash, Java, ActiveX
使用PHP的APC擴充
使用HTML5的File API
相關學習推薦:PHP程式設計從入門到精通
第一種方法依賴第三方的瀏覽器插件,通用性不足,且易帶來安全隱患。不過由於Flash的使用比較廣泛,所以還是有許多網站使用Flash作為解決方案。
第二種方法的缺點在於,它需要安裝PHP的APC擴充庫,要求使用者能夠控制伺服器端的設定。另外,如果安裝APC只是為了實現一個上傳進度條,那麼顯然有點殺雞用牛刀的意思。
第三種方法應該是最理想的方法,不需要伺服器端的支持,僅在瀏覽器端使用Javascript。但由於HTML5標準尚未確立,各瀏覽器廠商的支援也不相同,所以暫時這種方法還難以普及。
PHP 5.4中引入的基於session的上傳進度監視功能(session.upload_progress),它提供了一個伺服器端的上傳進度監視解決方案。升級到PHP 5.4之後,不必安裝APC擴展,僅使用原生PHP和前端的Javascript即可實現上傳進度條。
下面我們就詳細介紹一下 PHP 5.4 的這個 session.upload_progress 新功能。
原理介紹
當瀏覽器向伺服器端上傳一個檔案時,PHP將會把此次檔案上傳的詳細資料(如上傳時間、上傳進度等)存放在session當中。然後,隨著上傳的進行,週期性的更新session中的信息。這樣,瀏覽器端就可以使用Ajax週期性的請求一個伺服器端腳本,由該腳本傳回session中的進度資訊;瀏覽器端的Javascript即可根據這些資訊顯示/更新進度列了。
那麼,檔案上傳資訊具體是如何儲存的?我們要如何存取它?下面我們來詳細說明。
PHP 5.4 中引入了一些配置項(在php.ini中進行設定)
程式碼如下:
session.upload_progress.enabled = "1" session.upload_progress.cleanup = "1" session.upload_progress.prefix = "upload_progress_" session.upload_progress.name = "PHP_SESSION_UPLOAD_PROGRESS" session.upload_progress.freq = "1%" session.upload_progress.min_freq = "1"
其中enabled控制upload_progress功能的開啟與否,預設開啟;cleanup 則設定當檔案上傳的請求提交完成後,是否清除session的相關訊息,預設為開啟。
prefix 和 name 兩項用來設定進度資訊在session中儲存的變數名稱/鍵名。關於這兩項的詳細使用請見下文。
freq 和 min_freq 兩項用來設定伺服器端對進度資訊的更新頻率。合理的設定這兩項可以減輕伺服器的負擔。
在上傳檔案的表單中,需要為該次上傳設定一個標識符,並在接下來的過程中使用該標識符來引用進度資訊。具體的,在上傳表單中需要有一個隱藏的input,它的name屬性為php.ini中 session.upload_progress.name 的值;它的值為一個由你自己定義的標識符。如下:
程式碼如下:
<input type="hidden" name="<?php echo ini_get('session.upload_progress.name'); ?>" value="test" />
接到檔案上傳的表單後,PHP會在$_SESSION變數中新建鍵,鍵名稱是一個將session.upload_progress.prefix的值與上面你自訂的標識符連接後得到的字串,可以這樣得到:
代碼如下:
$name = ini_get('session.upload_progress.name'); $key = ini_get('session.upload_progress.prefix') . $_POST[$name]; $_SESSION[$key]; // 这里就是此次文件上传的进度信息了
$_SESSION[$key]
這個變數的結構是這樣的:
程式碼如下:
$_SESSION["upload_progress_test"] = array( "start_time" => 1234567890, // 开始时间 "content_length" => 57343257, // POST请求的总数据长度 "bytes_processed" => 453489, // 已收到的数据长度 "done" => false, // 请求是否完成 true表示完成,false未完成 // 单个文件的信息 "files" => array( 0 => array( ... ), // 同一请求中可包含多个文件 1 => array( ... ), ) );
這樣,我們就可以使用其中的content_length 和bytes_processed 兩個項目來得到進度百分比。
程式範例
原理介紹完了,下面我們來完整的實作一個基於PHP和Javascript的檔案上傳進度條。
上傳表單
首先,來寫我們的上傳表單頁面index.php,程式碼如下:
<form id="upload-form" action="upload.php" method="POST" enctype="multipart/form-data" style="margin:15px 0" target="hidden_iframe"> <input type="hidden" name="" value="test" /> <p><input type="file" name="file1" /></p> <p><input type="submit" value="Upload" /></p> </form> <iframe id="hidden_iframe" name="hidden_iframe" src="about:blank" style="display:none;"></iframe> <p id="progress" class="progress" style="margin-bottom:15px;display:none;"> <p class="bar" style="width:0%;"></p> <p class="label">0%</p> </p>
#progress 這個p是用來顯示進度條的。
處理上傳的檔案
表單的action指向upload.php,我們在upload.php中處理上傳的文件,將它轉存到目前目錄。這裡與通常情況下的上傳處理沒有區別。代码如下:
if(is_uploaded_file($_FILES['file1']['tmp_name'])){ move_uploaded_file($_FILES['file1']['tmp_name'], "./{$_FILES['file1']['name']}"); } ?>
Ajax获取进度信息
这一步是关键,我们需要建立一个 progress.php 文件,用来读取session中的进度信息; 然后我们在 index.php 中增加Javascript代码,向 progress.php 发起Ajax请求,然后根据获得的进度信息更新进度条。
progress.php 的代码如下:
代码如下:
session_start(); $i = ini_get('session.upload_progress.name'); $key = ini_get("session.upload_progress.prefix") . $_GET[$i]; if (!empty($_SESSION[$key])) { $current = $_SESSION[$key]["bytes_processed"]; $total = $_SESSION[$key]["content_length"]; echo $current < $total ? ceil($current / $total * 100) : 100; }else{ echo 100; } ?>
在这里我们获得$_SESSION变量中的进度信息,然后输出一个进度百分比。
在 index.php 中,我们将如下代码添加到页面底部 (为简便,这里使用jQuery):
代码如下:
function fetch_progress(){ $.get('progress.php',{ '' : 'test'}, function(data){ var progress = parseInt(data); $('#progress .label').html(progress + '%'); $('#progress .bar').css('width', progress + '%'); if(progress < 100){ setTimeout('fetch_progress()', 100); }else{ $('#progress .label').html('完成!'); } }, 'html'); } $('#upload-form').submit(function(){ $('#progress').show(); setTimeout('fetch_progress()', 100); });
当#upload-form被提交时,我们把进度条显示出来,然后反复调用 fetch_progress() 获得进度信息,并更新进度条,直到文件上传完毕,显示'完成!'。
注意事项
input标签的位置
name为session.upload_progress.name的input标签一定要放在文件input 的前面。
取消上传
通过设置 $_SESSION[$key]['cancel_upload'] = true 可取消当次上传。但仅能取消正在上传的文件和尚未开始的文件。已经上传成功的文件不会被删除。
setTimeout vs. setInterval
应该通过 setTimeout() 来调用 fetch_progress(),这样可以确保一次请求返回之后才开始下一次请求。如果使用 setInterval() 则不能保证这一点,有可能导致进度条出现'不进反退'。
以上是學習PHP中使用Session配合Javascript實作檔案上傳進度條功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!