如何在HTML5和JavaScript中創建圖形文件上傳進度條

鑰匙要點

• >在完成時為當前進度值和值提供屬性的HTML5 Progress標籤可用於創建圖形文件上傳進度欄，儘管作者選擇使用標準P標籤來用於更多樣式選項。
可以使用CSS進行進度欄的樣式，而綠色欄則作為圖形創建的寬度是進度元素的兩倍，並且在上傳成功或失敗時應用了固體色。
• >
>通過修改uploadfile（）函數，添加一個“進度”事件處理程序函數來計算新的背景位置，並在上傳完成時設置“成功”或“失敗”類，從而在JavaScript中實現了進度欄。
在我以前的帖子中，我們發現瞭如何使用HTML5文件拖放，使用JavaScript打開文件，並使用AJAX上傳文件。在本系列的最後一部分中，我們涵蓋了該過程中最令人興奮的部分：圖形進度條！ 文件上傳進度條提供了必不可少的用戶反饋，但眾所周知，它們很難實施。到現在為止。 Firefox和Chrome都支持提供進度事件處理程序的XMLHTTPRequest2對象。但是首先，讓我們考慮如何實施進度標準……

html5進度標籤

新的進度標籤提供了兩個屬性：

值：當前的進度值
最大：完成時的值
該標籤在此演示中本來是理想的選擇，儘管它在Chrome中得到了支持，但它僅出現在Firefox 6中。此外，這兩個瀏覽器都沒有提供許多樣式屬性，因此我將其放下以支持標準的P標籤。這是小時候附加到Div的 具有ID“進度”。

造型進度欄

我們的p標籤將在邊界框中顯示文件名的大小為250px：

對於綠色條本身，我創建了一個圖形，其寬度是進度元素（500px）的兩倍。左250px是彩色的，右250px是透明的：

#progress p
{
	display: block;
	width: 240px;
	padding: 2px 5px;
	margin: 2px 0;
	border: 1px inset #446;
	border-radius: 5px;
}

該圖形用作進度欄的背景圖像，並定位在“ x％0”中，其中x％表示剩餘（未完成）的比例，即。

>進度從“背景位置：100％0”開始，即剩餘100％
>進度以“背景位置：0％0”結束，即沒有什麼剩下的
“背景位置：30％0”意味著70％已經完成：
• 

當上傳成功或失敗時，通過設置類來應用純色：

#progress p
{
	display: block;
	width: 240px;
	padding: 2px 5px;
	margin: 2px 0;
	border: 1px inset #446;
	border-radius: 5px;
}

在JavaScript中實現進度欄

現在，我們可以修改我們的uploadfile（）函數。遇到有效的JPG文件時，我們將新的P標籤附加到#Progress元素，然後將文件名添加為文本：

#progress p.success
{
	background: #0c0 none 0 0 no-repeat;
}

#progress p.failed
{
	background: #c00 none 0 0 no-repeat;
}

現在，我們需要“進度”事件處理程序功能。這將接收一個帶有.LOADAD和.TOTAL屬性的對象 - 計算新的背景問題是必要的一點數學：

// upload JPEG files
function UploadFile(file) {

	var xhr = new XMLHttpRequest();
	if (xhr.upload && file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {
	
		// create progress bar
		var o = $id("progress");
		var progress = o.appendChild(document.createElement("p"));
		progress.appendChild(document.createTextNode("upload " + file.name));

如果您熟悉Ajax，則可以認識到現有的StateChange事件處理程序。這確定了何時上傳完成並相應地設計進度欄（如果上傳成功，則將“成功”類設置）：

		// progress bar
		xhr.upload.addEventListener("progress", function(e) {
			var pc = parseInt(100 - (e.loaded / e.total * 100));
			progress.style.backgroundPosition = pc + "% 0";
		}, false);

最後，我們像以前一樣將文件發送到我們的PHP服務器：

		// file received/failed
		xhr.onreadystatechange = function(e) {
			if (xhr.readyState == 4) {
				progress.className = (xhr.status == 200 ? "success" : "failure");
			}
		};

我們終於有了一個解決方案：

1. 啟用文件拖動並滴入網頁元素
>
2. >分析和顯示在客戶端上刪除文件
3. 異步將文件上傳到服務器
4. 顯示上傳期間的圖形進度欄
>使用漸進式增強來支持大多數瀏覽器
不需要JavaScript庫。
6. 但是，請查看演示頁面，但是請注意，這是在沒有PHP的服務器上託管的，因此不會發生文件上傳。要測試它，請下載文件以檢查代碼並將其託管在您自己的服務器上。 希望您喜歡這個系列，並考慮文件拖放如何幫助您的Web應用程序。 如果您喜歡閱讀這篇文章，那麼您會喜歡學習；從大師那裡學習新鮮技能和技術的地方。成員可以立即訪問SitePoint的所有電子書和交互式在線課程，例如Learn HTML5。
>關於HTML5 JavaScript文件上傳進度欄

的經常詢問問題（常見問題解答）

>如何自定義進度欄的外觀？

>可以使用CSS自定義進度欄的外觀。您可以更改顏色，高度，寬度甚至進度條的形狀。例如，要更改顏色，您可以使用“背景色”屬性。您也可以使用“邊界 - 拉迪烏斯”屬性使進度條形圓形或圓形。請記住針對CSS中正確的類或ID以將這些更改應用於進度欄。

我可以將此進度欄用於多個文件上傳嗎？

是的，您可以使用此進度用於多個文件上傳的欄。但是，您需要修改JavaScript代碼以處理多個文件。您可以在輸入標籤中使用“多個”屬性來選擇多個文件。然後，在您的JavaScript中，您需要循環瀏覽文件並單獨上傳它們，並為每個文件更新進度欄。

>

>如何在進度欄上顯示上傳完成的百分比？ '活動聽眾。您可以通過將加載的金額除以總量並乘以100來計算百分比。然後，將此值設置為Progress Bar元素的文本內容。

為什麼我的進度欄在文件上傳期間不更新？

如果您的進度欄在文件上傳過程中沒有更新，則可能是由於幾個原因所致。一個常見的原因是“進度”事件聽眾無法正確設置。確保已將事件偵聽器添加到正確的對像中，並正確拼寫事件名稱。另外，檢查事件內部的代碼是否正確更新了進度欄的值和最大屬性。

我可以將此進度欄與其他編程語言一起使用，例如PHP或Python？是的，您可以將此進度欄與其他編程語言（如PHP或Python）一起使用。進度欄是使用HTML和JavaScript實施的，這些HTML和JavaScript是客戶端技術，可以與任何服務器端技術進行交互。您將需要在JavaScript代碼中修改AJAX請求以將文件發送到您的服務器端腳本，並且您的服務器端腳本將需要處理文件上傳並返回進度信息。

>我使Progress bar順利進行動畫？

>使進度欄順利進行動畫，您可以使用CSS過渡。將“過渡”屬性添加到CSS中的進度條元素，指定過渡的屬性（例如'width'），過渡的持續時間和時序函數（例如，'lineal' ，'sibe-out-out'）。

>在文件上傳過程中如何處理錯誤？

在文件上傳過程中處理錯誤可以在'錯誤'事件中完成聽眾。當上傳期間發生錯誤時，該事件將觸發。如果偵聽器，您可以向用戶顯示錯誤消息，並重置進度欄。

我可以取消文件上傳並重置進度欄嗎？文件上傳並重置進度欄。要取消文件上傳，您可以在XMLHTTPRequest對像上調用“流產”方法。要重置進度欄，您可以將其值屬性設置為0。

>如何限制上傳的文件大小？

>限制可以在JavaScript代碼中完成的文件大小以進行上傳。在發送AJAX請求之前。您可以從文件對象的“大小”屬性中獲取文件的大小，如果超出您的限制，請顯示錯誤消息併中止上傳。

>我可以將此進度欄用於其他類型的AJAX請求，而不僅僅是文件上傳？

是的，您可以將此進度欄用於其他類型的AJAX請求，而不僅僅是文件上傳。對於任何類型的AJAX請求，“進度”事件均可觸發，而不僅僅是文件上傳。您將需要修改JavaScript代碼以發送適當的AJAX請求，並根據請求的進度更新進度欄。

以上是如何在HTML5和JavaScript中創建圖形文件上傳進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章！