コメント：以下では、HTML 5の新機能ファイルAPIを使用してファイルをアップロードし、アップロードファイルの進行状況の割合を表示します。意図は次のとおりです。ファイルが選択されると、現在のファイル情報が表示されます。
ここでは、ASP.NET MVCをサーバーとして組み合わせて、他のサーバー言語を使用することもできます。このスニペットのHTMLを見てみましょう：@using（html.beginform（ "upload"、 "home"、formmethod.post、new {enctype = "multipart/form-data"、}）））
{
<div>
<ラベル= "file">
画像のアップロード：</label>
<入力型= "ファイル"倍数= "倍数" onchange = "fileselected（）;" />
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<入力型= "ボタン" value = "Upload Image" />
</div>
<div>
</div>
}
関連するJavaScriptは次のとおりです。
functionfileselected（）{
var file = document.getElementById（ 'filetoupload'）。ファイル[0];
if（file）{
var filesize = 0;
if（file.size> 1024 * 1024）
filesize =（math.round（file.size * 100 /（1024 * 1024）） / 100）.toString（） + 'mb';
それ以外
filesize =（math.round（file.size * 100/1024） / 100）.toString（） + 'kb';
document.getElementById（ 'filename'）。innerhtml = 'name：' + file.name;
document.getElementById（ 'filesize'）。innerhtml = 'size：' + filesize;
document.getElementById（ 'filetype'）。innerhtml = 'type：' + file.type;
}
}
function uploadfile（）{
var fd = new formdata（）;
fd.append（ "filetoupload"、document.getElementById（ 'filetoupload'）。ファイル[0]）;
var xhr = new xmlhttprequest（）;
xhr.upload.addeventlistener（ "progress"、uploadprogress、false）;
xhr.addeventlistener（ "load"、uploadcomplete、false）;
xhr.addeventlistener（ "error"、uploadfailed、false）;
xhr.addeventlistener（ "abort"、uploadcanceled、false）;
xhr.open（ "post"、 "home/upload"）;
xhr.send（fd）;
}
関数uploadprogress（evt）{
if（evt.lengthcomputable）{
varパーセントcomplete = math.round（evt.loaded * 100 /evt.total）;
document.getElementById（ 'ProgressNumber'）。innerhtml = percentcomplete.toString（） + '％';
}
それ以外 {
document.getElementById（ 'progressnumber'）。innerhtml = '計算できない';
}
}
関数uploadcomplete（evt）{
/ *このイベントは、サーバーが応答を返送するときに発生します */
alert（evt.target.responsetext）;
}
function uploadfailed（evt）{
Alert（ "ファイルをアップロードしようとするエラーがありました。"）;
}
function uploadcanceled（evt）{
Alert（ "アップロードがユーザーによってキャンセルされたか、ブラウザが接続をドロップしました。"）;
}
上記はネイティブJavaScriptで、Onchangeイベントでファイルセレクトされた関数を実行し、クリックボタンでuploadFile関数を実行します。ここで、XMLHTTPREQUESTを使用してAJAXアップロードファイルを実装します。コードはFirefox 14で動作できることに注意してください。IE9は現在、ファイルAPIをサポートしていないため、こちらから参加できます。サーバー側のコードは非常に簡単です：
パブリッククラスのホームコントローラー：コントローラー
{
public ActionResult index（）
{
return View（）;
}
/// <summary>
///指定されたファイルをアップロードします。
/// </summary>
/// <param>ファイル。</param>
/// <Returns> ActionResult </returns>
[httppost]
public ActionResult upload（httppostedFileBase [] fileToupload）
{
foreach（filetouploadのhttppostedfilebaseファイル）
{
string path = system.io.path.combine（server.mappath（ "〜/app_data"）、system.io.path.getfilename（file.filename））;
file.saveas（path）;
}
viewbag.message = "file（s）アップロードされた";
REDIRECTTOACTION（ "index"）;
}
}
著者：Petter Liu