鑰匙要點(diǎn)

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

html5進(jìn)度標(biāo)簽

新的進(jìn)度標(biāo)簽提供了兩個(gè)屬性：

值：當(dāng)前的進(jìn)度值
最大：完成時(shí)的值
該標(biāo)簽在此演示中本來是理想的選擇，盡管它在Chrome中得到了支持，但它僅出現(xiàn)在Firefox 6中。此外，這兩個(gè)瀏覽器都沒有提供許多樣式屬性，因此我將其放下以支持標(biāo)準(zhǔn)的P標(biāo)簽。這是小時(shí)候附加到Div的 具有ID“進(jìn)度”。

造型進(jìn)度欄

我們的p標(biāo)簽將在邊界框中顯示文件名的大小為250px：

對于綠色條本身，我創(chuàng)建了一個(gè)圖形，其寬度是進(jìn)度元素（500px）的兩倍。左250px是彩色的，右250px是透明的：

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

該圖形用作進(jìn)度欄的背景圖像，并定位在“ x％0”中，其中x％表示剩余（未完成）的比例，即。

>進(jìn)度從“背景位置：100％0”開始，即剩余100％
>進(jìn)度以“背景位置：0％0”結(jié)束，即沒有什么剩下的
“背景位置：30％0”意味著70％已經(jīng)完成：
• 

當(dāng)上傳成功或失敗時(shí)，通過設(shè)置類來應(yīng)用純色：

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

在JavaScript中實(shí)現(xiàn)進(jìn)度欄

現(xiàn)在，我們可以修改我們的uploadfile（）函數(shù)。遇到有效的JPG文件時(shí)，我們將新的P標(biāo)簽附加到#Progress元素，然后將文件名添加為文本：

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

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

現(xiàn)在，我們需要“進(jìn)度”事件處理程序功能。這將接收一個(gè)帶有.LOADAD和.TOTAL屬性的對象 - 計(jì)算新的背景問題是必要的一點(diǎn)數(shù)學(xué)：

// 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，則可以認(rèn)識(shí)到現(xiàn)有的StateChange事件處理程序。這確定了何時(shí)上傳完成并相應(yīng)地設(shè)計(jì)進(jìn)度欄（如果上傳成功，則將“成功”類設(shè)置）：

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

最后，我們像以前一樣將文件發(fā)送到我們的PHP服務(wù)器：

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

我們終于有了一個(gè)解決方案：

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

的經(jīng)常詢問問題（常見問題解答）

>如何自定義進(jìn)度欄的外觀？

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

我可以將此進(jìn)度欄用于多個(gè)文件上傳嗎？

是的，您可以使用此進(jìn)度用于多個(gè)文件上傳的欄。但是，您需要修改JavaScript代碼以處理多個(gè)文件。您可以在輸入標(biāo)簽中使用“多個(gè)”屬性來選擇多個(gè)文件。然后，在您的JavaScript中，您需要循環(huán)瀏覽文件并單獨(dú)上傳它們，并為每個(gè)文件更新進(jìn)度欄。

>

>如何在進(jìn)度欄上顯示上傳完成的百分比？ '活動(dòng)聽眾。您可以通過將加載的金額除以總量并乘以100來計(jì)算百分比。然后，將此值設(shè)置為Progress Bar元素的文本內(nèi)容。

為什么我的進(jìn)度欄在文件上傳期間不更新？

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

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

>我使Progress bar順利進(jìn)行動(dòng)畫？

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

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

在文件上傳過程中處理錯(cuò)誤可以在'錯(cuò)誤'事件中完成聽眾。當(dāng)上傳期間發(fā)生錯(cuò)誤時(shí)，該事件將觸發(fā)。如果偵聽器，您可以向用戶顯示錯(cuò)誤消息，并重置進(jìn)度欄。

我可以取消文件上傳并重置進(jìn)度欄嗎？文件上傳并重置進(jìn)度欄。要取消文件上傳，您可以在XMLHTTPRequest對象上調(diào)用“流產(chǎn)”方法。要重置進(jìn)度欄，您可以將其值屬性設(shè)置為0。

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

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

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

是的，您可以將此進(jìn)度欄用于其他類型的AJAX請求，而不僅僅是文件上傳。對于任何類型的AJAX請求，“進(jìn)度”事件均可觸發(fā)，而不僅僅是文件上傳。您將需要修改JavaScript代碼以發(fā)送適當(dāng)?shù)腁JAX請求，并根據(jù)請求的進(jìn)度更新進(jìn)度欄。

以上是如何在HTML5和JavaScript中創(chuàng)建圖形文件上傳進(jìn)度條的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！