コメント:以下では、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