學習PHP中使用Session配合Javascript實作檔案上傳進度條功能

coldplay.xixi
發布: 2023-04-09 11:20:02
轉載
2482 人瀏覽過

學習PHP中使用Session配合Javascript實作檔案上傳進度條功能

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(&#39;session.upload_progress.name&#39;); ?>"
    value="test" />
登入後複製

接到檔案上傳的表單後,PHP會在$_SESSION變數中新建鍵,鍵名稱是一個將session.upload_progress.prefix的值與上面你自訂的標識符連接後得到的字串,可以這樣得到:

代碼如下:

$name = ini_get(&#39;session.upload_progress.name&#39;);
$key = ini_get(&#39;session.upload_progress.prefix&#39;) . $_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>
登入後複製

注意表單中的session.upload_progress.name隱藏項,值設定為了test。表單中只有一個檔案上傳input,如果需要,你可以增加多個。

這裡需要特別注意一下表單的target屬性,這裡設定指向了一個目前頁面中的iframe。這一點很關鍵,透過設定target屬性,讓表單提交後的頁面顯示在iframe中,從而避免當前的頁面跳躍。因為我們還得在目前頁面顯示進度條呢。

#progress 這個p是用來顯示進度條的。

注意 別忘了在index.php的最開始加上session_start()。

處理上傳的檔案

表單的action指向upload.php,我們在upload.php中處理上傳的文件,將它轉存到目前目錄。這裡與通常情況下的上傳處理沒有區別。


代码如下:

if(is_uploaded_file($_FILES[&#39;file1&#39;][&#39;tmp_name&#39;])){
        move_uploaded_file($_FILES[&#39;file1&#39;][&#39;tmp_name&#39;], "./{$_FILES[&#39;file1&#39;][&#39;name&#39;]}");
}
?>
登入後複製

Ajax获取进度信息

这一步是关键,我们需要建立一个 progress.php 文件,用来读取session中的进度信息; 然后我们在 index.php 中增加Javascript代码,向 progress.php 发起Ajax请求,然后根据获得的进度信息更新进度条。

progress.php 的代码如下:

代码如下:

session_start();
$i = ini_get(&#39;session.upload_progress.name&#39;);
$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(&#39;progress.php&#39;,{ &#39;&#39; : &#39;test&#39;}, function(data){
                var progress = parseInt(data);
                $(&#39;#progress .label&#39;).html(progress + &#39;%&#39;);
                $(&#39;#progress .bar&#39;).css(&#39;width&#39;, progress + &#39;%&#39;);
                if(progress < 100){
                        setTimeout(&#39;fetch_progress()&#39;, 100);
                }else{
            $(&#39;#progress .label&#39;).html(&#39;完成!&#39;);
        }
        }, &#39;html&#39;);
}
$(&#39;#upload-form&#39;).submit(function(){
        $(&#39;#progress&#39;).show();
        setTimeout(&#39;fetch_progress()&#39;, 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中文網其他相關文章!

相關標籤:
來源:jb51.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板