グラフィカルファイルを作成する方法html5とjavascriptで進行状況バーをアップロードする

キーテイクアウト

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

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

値：現在の進行状況

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

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

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

このグラフィックは、進行状況バーの背景画像として使用され、「x％0」に配置されているx％は、残りの割合（完了していない）、つまり

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

進行状況は、「バックグラウンドポジション：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ファイルが発生した場合、＃progress要素に新しいpタグを追加し、ファイル名をテキストとして追加します。

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

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

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

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

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

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

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

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

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

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

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

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

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

以上がグラフィカルファイルを作成する方法html5とjavascriptで進行状況バーをアップロードするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。