跟蹤上傳進度PHP和JavaScript_PHP教程

多年來一直困擾著Web開發人員的一個問題是如何添加到他們的應用程式，如檔案上傳進度條，即時資訊。使用者是急躁;他們不想坐等，而瀏覽器是做一些，不知是否已被凍結或如果他們有一個緩慢的串連。提供了一個進度列指示器，為使用者提供有用的資訊，並讓他們知道到底發生了什麼。
首先想到的，你可能會想辦成這可以​​很容易地通過首次獲得從使用者的電腦上檔案的大小，然後執行目錄所在的檔案正在上傳的伺服器上對一些簡單的計算。關於第二個想法，你會發現事情並非那麼簡單。
JavaScript可以訪問檔案的名稱，類型，甚至本地映像的寬度和高度，但它直到HTML5的，它可以訪問檔案的大小。不幸的是，HTML5仍然不是一個完整的標準，並均勻分布在所有的瀏覽器不支援。一個替代的解決方案是依靠一個Flash，Java或ActiveX外掛程式，沒有感謝，我會通過。然而，另一種解決辦法是安裝可選PHP緩衝擴充，但可能不取決於您的託管環境，它似乎像這樣一個小任務，如矯枉過正。
這似乎彷彿所有的選項是與滋擾充滿，任務已迅速成為一個頭痛。但在尤達的話，“不......是另一個。”
我愛PHP的許多原因之一是，它使看似困難的任務變得容易。5.4 PHP的，他們所做的又一個新的配置指令集，session.upload_progress。
在這篇文章中，我會告訴你如何這個功能可以被用來建立一個簡單的上傳進度條沒有任何外部庫或瀏覽器的依賴。我將首先討論它是如何工作的，然後我走過你建立的四個檔案，需要完成的任務（上傳的形式，一些JavaScript，一點點CSS，返回上傳的地位和檔案）。
會話上傳進度
除了 ​​一般的要求，允許上傳檔案，有兩個跟蹤進度。必須啟用session.upload_progress.enabled指令和你所指定的名稱的網頁表單中必須有一個隱藏的場session.upload_progress.name指令。當session.upload_progress.enabled是真實的（因為它預設是在PHP 5.4，大概超出）的$ _POST [ session.upload_progress.name期間發送上傳，檔案傳輸的資訊是在$ _SESSION的超全域陣列。
的print_r（）的輸出了$ _SESSION數組將類似於下列檔案傳輸過程中：

Array
(
[upload_progress_myForm] => Array
(
[start_time] => 1323733740
[content_length] => 721127769
[bytes_processed] => 263178326
[done] =>
[files] => Array
(
[0] => Array
(
[field_name] => userfile
[name] => ubuntu-10.04.3-desktop-i386.iso
[tmp_name] =>
[error] => 0
[done] =>
[start_time] => 1323733740
[bytes_processed] => 263178026
)
)
)
)

當您正在開發本地或快速網路上傳小檔案，你不會是能夠直觀地觀察到的進展，因為轉讓發生如此之快。在這種情況下，你可能想嘗試傳送一個大檔案。確保在你的php.ini的設定檔案允許上傳大，具體的post_max_size 的upload_max_filesize指令，然後確認他們是理智的價值，當你去生產。

建立表單

我會提出的第一個檔案上傳表單。只是為了保持儘可能簡單的事情，例如將張貼到自己，一次只能處理一個檔案上傳。此外，我不會打擾儲存檔案後，它已上傳。
下面是代碼form.php：
01
02
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES["userfile"])) {
03
// move_uploaded_file()
04
}
05
?>
06

07

08
File Upload Progress Bar
09

10

11

12

13

14

15

16

23

24

25

26

在這個例子中的代碼實際上處理的檔案已被省略，讓事情變得簡單。如果你有興趣在這樣的代碼看起來應該像什麼，檢查出的文章用PHP檔案上傳蒂莫西Boronczyk。
提供網頁的標題，包括樣式表後的頭一節，你會發現一個div元素的小集合。與身份證“bar_blank”格進度列的容器。與身份證“bar_color”格將動態更新的檔案上傳進度。“身份”的div將顯示上傳％的數值。
設定的形式提交到一個隱藏的iframe元素相同的URL，並將其目標屬性點。提交表單到一個隱藏的架構，讓你保持在同一頁上，而在後台完成的工作正在訪問者。事實上，這是一種常見的做法時，做“的Ajax檔案上傳”，因為它直接使用JavaScript的XMLHttpRequest的對象發送一個檔案的內容是不可能的。
在形式，特殊的隱藏欄位需要填充的數組$ _SESSION中出現，其次是一個檔案上傳輸入和提交按鈕。提交表單將觸發一個JavaScript函數名為startUpload（）將定義所包含的JavaScript檔案。
在頁面底部的隱藏幀的形式將發布和進口script.js的檔案。
添加一些樣式

style.css檔案，下一個檔案，是非常直截了當的。我定義的進度條容器的大小，並給它一個1px的黑邊，作為它的載入進度條的顏色，和隱藏的iframe和進度條。
01
#bar_blank {
02
border: solid 1px #000;
03
height: 20px;
04
width: 300px;
05
}
06
07
#bar_color {
08
background-color: #006666;
09
height: 20px;
10
width: 0px;
11
}
12
13
#bar_blank, #hidden_iframe {
14
display: none;
15
}

用戶端功能

script.js的檔案是最大的一組檔案。它包含六大功能，我將在下面討論。很多人喜歡使用jQuery提供的一些功能，如果你願意，你肯定是自由地這樣做，但我個人更喜歡老派的做法。類似日本的地方如何對手工製作的貨物價值較高的，我只是覺得更加熱愛代碼，如果是我自己。
01
function toggleBarVisibility() {
02
var e = document.getElementById("bar_blank");
03
e.style.display = (e.style.display == "block") ? "none" : "block";
04
}
05
06
function createRequestObject() {
07
var http;
08
if (navigator.appName == "Microsoft Internet Explorer") {
09
http = new ActiveXObject("Microsoft.XMLHTTP");
10
}
11
else {
12
http = new XMLHttpRequest();
13
}
14
return http;
15
}
16
17
function sendRequest() {
18
var http = createRequestObject();
19
http.open("GET", "progress.php");
20
http.onreadystatechange = function () { handleResponse(http); };
21
http.send(null);
22
}
23
24
function handleResponse(http) {
25
var response;
26
if (http.readyState == 4) {
27
response = http.responseText;
28
document.getElementById("bar_color").style.width = response + "%";
29
document.getElementById("status").innerHTML = response + "%";
30
31
if (response < 100) {
32
setTimeout("sendRequest()", 1000);
33
}
34
else {
35
toggleBarVisibility();
36
document.getElementById("status").innerHTML = "Done.";
37
}
38
}
39
}
40
41
function startUpload() {
42
toggleBarVisibility();
43
setTimeout("sendRequest()", 1000);
44
}
45
46
(function () {
47
document.getElementById("myForm").onsubmit = startUpload;
48
})();
toggleBarVisibility（）函數設定一個合適的風格上的“bar_blank”格，以顯示或隱藏進度條。最初，它開出隱藏的，但一旦上傳開始將顯示上傳完成時再次隱藏。
createRequestObject（）函數建立的XMLHttpRequest或ActiveXObject的基於使用者的瀏覽器上的對象。這可能是大多數人都期待jQuery或其他一些JavaScript架構提供的功能。
sendRequest將（）函數請求的progress.php GET請求的檔案，然後調用handleResponse（）函數來處理返回的資料。
handleResponse（）函數處理從響應progress.php這將是一個1-100之間的數字上的檔案上傳進度而定。我也用適當的值更新“狀態”DIV。如果低於100的電流％，然後我調用JavaScript的原生的setTimeout（）函數將另一個更新要求後1的第二個可以調整這個值適當，否則我隱藏進度條再次和狀態設定為“完成”。
上傳欄可見的startUpload（）函數使發送1秒的延遲後，更新的要求。這個小小的延遲需要，為了給上傳時間開始。
最後一個功能是一個可自執行的匿名函數註冊startUpload（）表單的提交事件。

即時進度

帶來的一切融合在一起的最後一個檔案是progress.php檔案：
01
02
session_start();
03
04
$key = ini_get("session.upload_progress.prefix") . "myForm";
05
if (!empty($_SESSION[$key])) {
06
$current = $_SESSION[$key]["bytes_processed"];
07
$total = $_SESSION[$key]["content_length"];
08
echo $current < $total ? ceil($current / $total * 100) : 100;
09
}
10
else {
11
echo 100;
12
}

指令碼執行一些簡單的數學上傳輸的位元組數除以總的檔案大小，乘以100，四捨五入給個百分點。
關於轉讓的資訊鍵入一個的session.upload_progress.prefix指令的值串聯的的隱藏session.upload_progress.name領域的價值。因為我的形式通過了“myForm的”，會議的關鍵是確定ini_get（“session.upload_progress.prefix”）。“myForm的”。
這裡是一個行動的進度列的：

微調的行為
PHP提供了一些額外的指令，以協助微調會議上傳的行為，你應該知道的。例如，session.upload_progress.cleanup，這是預設設定為1，清理完成後立即上傳資料的額外會議。你必須要小心，以避免潛在的競爭條件。
再看一看，在代碼progress.php，你會發現，我檢查看如果$ _SESSION中[$鍵]是空的或不繼續之前。我的JavaScript功能觸發，從返回的結果，每隻要第二progress.php小於100。如果session.upload_progress.cleanup啟用和我的指令碼擷取上傳的99％和1 1/2-second後上傳完成了$ _SESSION [$鍵]將不存在下一個檢查。如果我沒有考慮到，然後我的JavaScript函數可能保持射擊，即使上傳完成後。
另外兩個指令是session.upload_progress.freq，和session.upload_progress.min_freq雙方確定如何往往會議應更新。可以在任一位元組（即100），或總位元組數的百分比（即2％）的頻率值。價值min_freq在幾秒鐘內，並表示更新之間的最小秒數。顯然，如果min_freq更新每隔1秒，這將是毫無意義的檢查，每100毫秒您的JavaScript。
總結www.2cto.com
你現在應該有一個牢固掌握如何建立一個使用會議上傳進度功能的檔案上傳進度條。向前走，我鼓勵你們實驗上傳多個檔案，選擇取消使用進度上傳$ _SESSION [$鍵可以鼓起你的頭腦[“cancel_upload”，]，或任何其他的想法。請在您的經驗和改進的意見。

作者：newcnzz

http://www.bkjia.com/PHPjc/478020.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/478020.htmlTechArticle多年來一直困擾著Web開發人員的一個問題是如何添加到他們的應用程式，如檔案上傳進度條，即時資訊。使用者是急躁;他們不想坐等，而瀏覽...

