跟踪上传进度PHP和JavaScript
生活随笔
收集整理的這篇文章主要介紹了
跟踪上传进度PHP和JavaScript
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
多年來一直困擾著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 <?php 02 if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES["userfile"])) { 03 ?? ?// move_uploaded_file() 04 } 05 ?> 06 <html> 07 ?<head> 08 ??<title>File Upload Progress Bar</title> 09 ??<link rel="stylesheet" type="text/css" href="style.css"> 10 ?</head> 11 ?<body> 12 ??<div id="bar_blank"> 13 ?? <div id="bar_color"></div> 14 ??</div> 15 ??<div id="status"></div> 16 ??<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="POST" 17 ?? id="myForm" enctype="multipart/form-data" target="hidden_iframe"> 18 ?? <input type="hidden" value="myForm" 19 ?? ?name="<?php echo ini_get("session.upload_progress.name"); ?>"> 20 ?? <input type="file" name="userfile"><br> 21 ?? <input type="submit" value="Start Upload"> 22 ??</form> 23 ??<iframe id="hidden_iframe" name="hidden_iframe" src="about:blank"></iframe> 24 ??<script type="text/javascript" src="script.js"></script> 25 ?</body> 26 </html>
在這個例子中的代碼實際上處理的文件已被省略，讓事情變得簡單。如果你有興趣在這樣的代碼看起來應該像什么，檢查出的文章用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 <?php 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。 總結 你現在應該有一個牢固掌握如何創建一個使用會議上傳進度功能的文件上傳進度條。向前走，我鼓勵你們實驗上傳多個文件，選擇取消使用進度上傳$ _SESSION [$鍵可以鼓起你的頭腦[“cancel_upload”，]，或任何其他的想法。請在您的經驗和改進的意見。
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 <?php 02 if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES["userfile"])) { 03 ?? ?// move_uploaded_file() 04 } 05 ?> 06 <html> 07 ?<head> 08 ??<title>File Upload Progress Bar</title> 09 ??<link rel="stylesheet" type="text/css" href="style.css"> 10 ?</head> 11 ?<body> 12 ??<div id="bar_blank"> 13 ?? <div id="bar_color"></div> 14 ??</div> 15 ??<div id="status"></div> 16 ??<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="POST" 17 ?? id="myForm" enctype="multipart/form-data" target="hidden_iframe"> 18 ?? <input type="hidden" value="myForm" 19 ?? ?name="<?php echo ini_get("session.upload_progress.name"); ?>"> 20 ?? <input type="file" name="userfile"><br> 21 ?? <input type="submit" value="Start Upload"> 22 ??</form> 23 ??<iframe id="hidden_iframe" name="hidden_iframe" src="about:blank"></iframe> 24 ??<script type="text/javascript" src="script.js"></script> 25 ?</body> 26 </html>
在這個例子中的代碼實際上處理的文件已被省略，讓事情變得簡單。如果你有興趣在這樣的代碼看起來應該像什么，檢查出的文章用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 <?php 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。 總結 你現在應該有一個牢固掌握如何創建一個使用會議上傳進度功能的文件上傳進度條。向前走，我鼓勵你們實驗上傳多個文件，選擇取消使用進度上傳$ _SESSION [$鍵可以鼓起你的頭腦[“cancel_upload”，]，或任何其他的想法。請在您的經驗和改進的意見。
總結
以上是生活随笔為你收集整理的跟踪上传进度PHP和JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 查话费100861
- 下一篇： ctf php正则截断,记[BJDCTF