長い間、開発者はこの問題を解決するための解決策としてFlashを使用していますが、Flashバージョンではありません。一部のWebサイトは、フォームタグのenableype/form-data属性を使用していますが、この属性は、進行状況を表示するために特別な設定を行う必要があります私たち。
それでは、HTML5がこの問題を解決できる理由と、それがどれだけうまくいくかを見てみましょう。
HTML5を使用してファイルをアップロードしますHTML5標準では、XMLHTTPREQUESTオブジェクトが再定義され、XMLHTTPREQUESTレベル2として知られています。これには、次の5つの新機能が含まれています。
1.ファイル、ブロブ、フォームデータなどのバイトのアップロードとダウンロードをサポート
2。アップロードとダウンロードの進捗を追加しました
3。クロスドメインリクエストのサポート
4。匿名のリクエストを許可します（つまり、HTTPを送信しない紹介部分）
5.リクエストのタイムアウトを許可します
このチュートリアルでは、主に最初の機能と2番目の機能、特に2番目のアイテムに注意を払います。以前のプランとは異なり、このソリューションでは、サーバーが特別な設定を作成する必要はないため、チュートリアルを見ることで誰もが試してみることができます。
上記の図は、達成できるコンテンツです。
1.ファイル名、タイプ、サイズなどのアップロードされたファイル情報を表示
2。本当の進歩を示すことができる進歩バー
3。アップロード速度
4。残りの時間の推定
5。アップロードされたデータの量
6.アップロードが終了した後にサーバーの応答が返されました
さらに、xmlhttprequestを使用すると、アップロードプロセスは非同期であるため、ユーザーがファイルをアップロードすると、Webページ内の他の要素を操作でき、アップロードが完了するのを待つ必要はありません。アップロードが終了した後、サーバーから応答を取得できるため、アップロードプロセス全体が非常に論理的です。
HTML5の進捗イベントHTML5は、新しい進捗イベントを追加します。これは、次の情報を提供します。
1。合計 - ファイルサイズ
2。ロード - アップロードのサイズ
3。長さコンプット可能 - 進捗状況を計算できるかどうか
多くの情報はありませんが、ファイルの進捗を計算するには十分です。もちろん、それが直接与えないことはまだたくさんあります、それは残念です。
HTML通常のファイルアップロードコードとそれほど違いはありません。ただし、入力タグはOnchangeでJavaScript関数を関連付けることに注意してください。
<！doctype html> <html> <head> <title> xmlhttprequest </head> <body> <form1 enctype = multipart/form-data method = upload.php> <div class = row> <label filetoupload>アップロードするファイルを選択</label> <入力タイプ=ファイル名= filetoupload id = filetoupload = filesected（）;/> </div> <div id = filename> </div> <div id = filesize> </div> <div id = filetype> </div> <div class = row> <input type = button onclick = uploadfile（）value = upload/>> << divJavaScript
HTMLで入力を使用すると、JSコードでファイルリストオブジェクトを取得できます。このオブジェクトは、HTML5の新しく追加されたファイルAPIの一部です。各FileListオブジェクトはファイルオブジェクトのセットであり、ファイルオブジェクトには次の属性があります。
1。名前 - ファイル名（パスは含まれません）
2。タイプ-Fileタイプ（小文字）
3。サイズ - ファイルサイズ（ユニットはバイト）
これはまさに私たちが必要とするものです。もちろん、HTML5にはFilreaderオブジェクトもありますが、ここでは使用しませんでした。これで、上記の3つのコンテンツを介して、サーバー中の圧力を軽減し、セキュリティファクターを改善するために、ユーザーがアップロードしたサイズとファイルのタイプを制御できます。
function filected {var file.getElementById（ 'filetoupload'）[0]; .size * 100 /（1024 * 1024）） / 100）.tring（） + 'mb'; document.getElementByid（ 'filename' + file.getelementbyid（ 'filesize'） 'タイプ：' + file.type;}}では、ユーザーが適切なファイルを選択して[アップロード]をクリックするとどうなりますか？
function uploadfile {var xhrhttprequest（） xhr.addeventlistener（false、se）; send（fd）;} uploadprogress（evt）{evt.lengthcompetable）{math.round。 ） + '％';} else {document.gtelementbyid（ 'progressnumber'）.innerhtml = 'compute';}} function uploadcomplete（evt）{ / *このイベントは、サーバーが応答を送信すると掲載されます * /アラート（evt.target.responseText）; fily uploadcanceled（evt）{alert（upload can captain byユーザーまたはブラウザが接続を削除する）;}コードの2行目では、JSコードは別のHTML5によって起動された別の新しいオブジェクト-FormDataを使用します。 FormDataオブジェクトは、ユーザーのフォームデータのセットです。フォームデータはキー値ペアの形式で保存できます。このオブジェクトを回すことにより、サーバーにデータを送信します。
もちろん、次のように、このオブジェクトをコードで手動で作成することもできます。
var fd = new formdata（）; ]）;
トピックに戻ります。前のコードを振り返ってみると、XMLHTTPREQUESTの多くのイベント監視を追加しました。特に、私たちがリンクしているのはxmlhttprequest自体ではなく、uploadprogressなどの属性であることに注意することが重要です。
完全なコード最後に、完全なコードをご覧ください。
<！ [0] if（file）{var filesize = 0; ） + 'mb' filesize =（file.size * 100/1024） / 'kb'; .name.getElementByid（ 'filesize'） ' + filesize; fd.getelementbyid（ 'filetoupload'）。 false）; xhr.addeventlistener（uploadfailed、false）; percentcomplete.round（ev.loaded * 100 / evt.total）;サーバーが応答を送信すると、sを計算します（evt.target .responsetext）;} uploadfailed（evt）{アラート（ファイルをアップロードしようとするエラーがありました）ユーザーまたはブラウザが接続をドロップしました。）;} </script> </head> <boody> <form id = form1 enctype = multipart/form-data method = post action = upload.php> <div class = row > <label = filetoupロード>アップロードするファイルを選択</label> <入力タイプ=ファイル名= filetoupload id = filetoupload onchange = fileselect（）;/> </div> <div id = filename> </div> < div id = fi lesize> </div> <div id = filetype> </div> <div class = row> <input type = button onclick = uploadfile（）value = upload/> </div m> </body> </html>私たちのタスクは完了していますか？このコードはファイルをアップロードするタスクを完了することができ、このスケルトンHTMLを除き、アップロードの進捗を表示することもできます。 CSS Beautifyなど、CSSなど、行われていない多くのことがあります。しかし、これは私たちの記事のテーマではありません。
最後に、チュートリアルのコードは、ブラウザがサポートされているかどうかがわからない場合は、ここで確認できることを思い出させます。
上記は、この記事のすべての内容です。