キーテイクアウト

• 現(xiàn)在の進(jìn)行狀況と値の屬性を提供するHTML5 Progressタグは、グラフィカルファイルアップロード進(jìn)行バーを作成するために使用できます。
進(jìn)行狀況バーは、CSSを使用してスタイルを整えることができます。グリーンバーは、進(jìn)行狀態(tài)の要素の2倍のグラフィックとして作成され、アップロードが成功または故障したときに固體色が適用されます。
• uploadFile（）関數(shù)を変更し、新しいバックグラウンド位置を計(jì)算する「進(jìn)行狀況」イベントハンドラー関數(shù)を追加し、アップロードが完了したときに「成功」??または「失敗」のクラスを設(shè)定することにより、javaScriptに実裝されます。
• 私の以前の投稿では、HTML5ファイルのドラッグ＆ドロップの使用方法、JavaScriptを使用してファイルを開(kāi)く方法、およびAJAXを使用してファイルを非同期にアップロードする方法を発見(jiàn)しました。このシリーズの最後の部分では、プロセスの最もエキサイティングな部分であるグラフィカルな進(jìn)歩バーをカバーしています！ ファイルアップロード進(jìn)行棒は、本質(zhì)的なユーザーフィードバックを提供しますが、実裝が難しいことで有名です。これまでです。 FirefoxとChromeの両方が、進(jìn)行狀況イベントハンドラーを提供するXmlhttprequest2オブジェクトをサポートしています。しかし、最初に、進(jìn)行狀況バーがどのように実裝されるかを考えてみましょう…
HTML5 Progress Tag

新しいProgressタグは、2つの屬性を提供します。

値：現(xiàn)在の進(jìn)行狀況

• max：完了時(shí)の値
• このデモではこのタグは理想的であり、Chromeではサポートされていますが、Firefox 6にのみ登場(chǎng)しました。さらに、どちらのブラウザーも多くのスタイリングプロパティを提供していないため、標(biāo)準(zhǔn)のPタグを支持してドロップしました。これは、子供の頃にdivに追加されます IDで「進(jìn)行狀況」。
進(jìn)行狀況のスタイリング

私たちのPタグには、サイズが250pxの境界ボックスにファイル名が表示されます。

緑色のバー自體には、進(jìn)行狀況要素（500px）の2倍のグラフィックを作成しました。左250pxは著色されており、右250pxは透明です。

このグラフィックは、進(jìn)行狀況バーの背景畫(huà)像として使用され、「x％0」に配置されているx％は、殘りの割合（完了していない）、つまり

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

進(jìn)行狀況は、「バックグラウンドポジション：100％0」、つまり100％の殘り

から始まります
• 進(jìn)行狀況は「バックグラウンドポジション：0％0」で終了します。つまり、何も殘っていません
• 「背景ポジション：30％0」は70％が完了したことを意味します。

アップロードが成功または故障したときにクラスを設(shè)定することにより、固體色が適用されます。

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

JavaScript

で進(jìn)行狀況バーを?qū)g裝しています これで、uploadFile（）関數(shù)を変更できます。有効なjpgファイルが発生した場(chǎng)合、＃progress要素に新しいpタグを追加し、ファイル名をテキストとして追加します。

これで、「進(jìn)行狀況」イベントハンドラー機(jī)能が必要になりました。これにより、.loadedおよび.totalプロパティを備えたオブジェクトが受信されます。新しいバックグラウンドポジションを計(jì)算するには、少し數(shù)學(xué)が必要です。

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

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

Ajaxに精通している場(chǎng)合は、onedeadystatechangeイベントハンドラーを認(rèn)識(shí)します。これにより、アップロードがいつ完了したかを決定し、それに応じて進(jìn)行狀況バーをスタイルします（アップロードが成功した場(chǎng)合、「成功」のクラスを設(shè)定します）：

// 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));

最後に、以前のようにPHPサーバーにファイルを送信します。

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

ついに次の解決策があります。

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

ファイルをWebページにドラッグしてドロップすることを有効にします
クライアントにドロップされたファイルを分析して表示
ファイルをサーバーにアップロードします
アップロード中のグラフィカルな進(jìn)行狀況バーを示します
プログレッシブエンハンスメントを使用して、ほとんどのブラウザ
5. をサポートします
は、JavaScriptライブラリを必要とせずにコーディングされています
6. デモンストレーションページを表示してください。これは、PHPのないサーバーでホストされているため、ファイルのアップロードが発生しないことに注意してください。それをテストするには、ファイルをダウンロードしてコードを調(diào)べ、自分のサーバーでホストしてください。 このシリーズを楽しんで、ファイルドラッグアンドドロップがWebアプリケーションにどのように役立つかを検討していることを願(yuàn)っています。 この投稿を読んで楽しんだなら、あなたは學(xué)ぶことができるのが大好きです。マスターから新鮮なスキルとテクニックを?qū)Wぶ場(chǎng)所。メンバーは、HTML5を?qū)W習(xí)するなど、SitePointのすべての電子ブックやインタラクティブなオンラインコースに即座にアクセスできます。 HTML5 JavaScriptファイルのアップロード進(jìn)行bar
に関するよくある質(zhì)問(wèn)（FAQ） Progress Barの外観をカスタマイズするにはどうすればよいですか？ Progress Barの外観をカスタマイズすることは、CSSを使用して実行できます。 Progress Barの色、高さ、幅、さらには形狀を変更できます。たとえば、色を変更するには、「バックグラウンドカラー」プロパティを使用できます。また、「Border-Radius」プロパティを使用して、進(jìn)行中のバーを円形または丸くすることもできます。 CSSの正しいクラスまたはIDをターゲットにして、これらの変更を進(jìn)行狀況バーに適用することを忘れないでください。複數(shù)のファイルアップロード用のバー。ただし、複數(shù)のファイルを処理するには、JavaScriptコードを変更する必要があります。入力タグで「複數(shù)」屬性を使用して、複數(shù)のファイルを選択できるようにすることができます。次に、JavaScriptでは、ファイルをループして個(gè)別にアップロードし、各ファイルの進(jìn)行狀況バーを更新する必要があります。

進(jìn)行狀況バーにアップロード完了の割合を表示するにはどうすればよいですか？

進(jìn)行狀況バーにアップロード完了の割合を表示することは、進(jìn)行狀況バー要素のテキストコンテンツを更新することで実現(xiàn)できます。 'イベントリスナー。負(fù)荷量に合計(jì)量を割って100を掛けることでパーセンテージを計(jì)算できます。次に、この値をプログレスバー要素のテキストコンテンツとして設(shè)定します。 ？

ファイルアップロード中に進(jìn)行狀況バーが更新されていない場(chǎng)合、いくつかの理由が原因である可能性があります。一般的な理由の1つは、「進(jìn)行狀況」イベントリスナーが正しくセットアップされないことです。イベントリスナーを正しいオブジェクトに追加し、イベント名が正しく綴られていることを確認(rèn)してください。また、イベントリスナー內(nèi)のコードが進(jìn)行狀況バーの値と最大屬性を正しく更新していることを確認(rèn)してください。はい、PHPやPythonなどの他のプログラミング言語(yǔ)でこの進(jìn)行狀況バーを使用できます。 Progress Barは、クライアント側(cè)のテクノロジーであり、サーバー側(cè)のテクノロジーと対話できるHTMLとJavaScriptを使用して実裝されています。 JavaScriptコードのAJAX要求を変更してファイルをサーバー側(cè)のスクリプトに送信する必要があります。サーバー側(cè)のスクリプトは、ファイルのアップロードを処理して進(jìn)行狀況情報(bào)を返す必要があります。進(jìn)行中のバーをスムーズにアニメーション化しますか？

進(jìn)行狀況バーをスムーズにアニメーション化するには、CSSトランジションを使用できます。 CSSのProgress Bar要素に「遷移」プロパティを追加し、プロパティを遷移（「幅」など）、遷移の持続時(shí)間、およびタイミング関數(shù)（例：「線形」、「Ease-in」を指定します。 、 'Ease-Out'）。リスナー。このイベントは、アップロード中にエラーが発生したときに起動(dòng)されます。リスナーでは、ユーザーにエラーメッセージを表示して進(jìn)行狀況バーをリセットできます。

ファイルのアップロードをキャンセルして、進(jìn)行狀況バーをリセットできますか？ファイルアップロードして、進(jìn)行狀況バーをリセットします。ファイルのアップロードをキャンセルするには、xmlhttprequestオブジェクトの「abort」メソッドを呼び出すことができます。 Progress Barをリセットするには、その値屬性を0に設(shè)定できます。

アップロードのファイルサイズを制限するにはどうすればよいですか？ AJAXリクエストを送信する前に。ファイルオブジェクトの「サイズ」プロパティからファイルのサイズを取得でき、制限を超えた場(chǎng)合は、エラーメッセージを表示してアップロードを中止します。

ファイルアップロードだけでなく、他のタイプのAJAXリクエストにこの進(jìn)行狀況バーを使用できますか？

はい、ファイルアップロードだけでなく、他のタイプのAJAXリクエストにこのProgress Barを使用できます。 「進(jìn)行狀況」イベントは、ファイルアップロードだけでなく、あらゆるタイプのAJAX要求に対して起動(dòng)されます。 JavaScriptコードを変更して、適切なAJAXリクエストを送信し、リクエストの進(jìn)行狀況に基づいて進(jìn)行狀況バーを更新する必要があります。

以上がグラフィカルファイルを作成する方法html5とjavascriptで進(jìn)行狀況バーをアップロードするの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。