鑰匙要點(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對(duì)象。但是首先，讓我們考慮如何實(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：

對(duì)於綠色條本身，我創(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屬性的對(duì)象 - 計(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庫(kù)。
6. 但是，請(qǐng)查看演示頁面，但是請(qǐng)注意，這是在沒有PHP的服務(wù)器上託管的，因此不會(huì)發(fā)生文件上傳。要測(cè)試它，請(qǐng)下載文件以檢查代碼並將其託管在您自己的服務(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)度條形圓形或圓形。請(qǐng)記住針對(duì)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è)置。確保已將事件偵聽器添加到正確的對(duì)像中，並正確拼寫事件名稱。另外，檢查事件內(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請(qǐng)求以將文件發(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對(duì)像上調(diào)用“流產(chǎn)”方法。要重置進(jìn)度欄，您可以將其值屬性設(shè)置為0。

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

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

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

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

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