HTML5 アップロード ファイルの進捗状況を表示するための実装コード_html5 チュートリアル スキル

ここではサーバーとして Asp.net MVC を組み合わせていますが、他のサーバー言語を使用することもできます。このフラグメントの HTML を見てみましょう:

コードをコピーします

コードは次のとおりです:

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" , id="form1"}))
{

画像のアップロード:

"row"> ;

}


関連する JavaScript は次のとおりです:

コピーcode

コードは次のとおりです。 function fileSelected() {

var file = document.getElementById('fileToUpload').files[0];

if (ファイル) {

var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024) )) / 100).toString () 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() 'KB'; .getElementById('fileName') .innerHTML = '名前: ' file.name;
document.getElementById('fileSize').innerHTML = 'サイズ: ' fileSize;
document.getElementById('fileType')。 innerHTML = 'タイプ: ' ファイル .type;
}
}
function UploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document. getElementById('fileToUpload');
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress"、uploadProgress、false);ロード"、アップロード完了、false) ;
xhr.addEventListener("エラー"、アップロード失敗、false);
xhr.addEventListener("中止"、uploadCanceled、false);
xhr.open("POST" , "ホーム/アップロード") ;
xhr.send(fd);
}
function UploadProgress(evt) {
if (evt.lengthComputable) {
varpercentComplete = Math.round (evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML =percentComplete.toString() '%';
}
else {
document.getElementById ('progressNumber').innerHTML = '計算できません';
}
}
function UploadComplete(evt) {
/* このイベントは、サーバーが応答を送り返すときに発生します */
alert(evt.target .responseText);
}
function UploadFailed(evt) {
alert("ファイルのアップロード中にエラーが発生しました。")
}
function UploadCanceled(evt) {
alert("アップロードがユーザーによってキャンセルされたか、ブラウザによって接続が切断されました。");
}


上記はネイティブ Javascript 関数です。 onchange イベントで fileSelected を実行すると、ボタンをクリックした後、uploadFile 関数が実行されます。ここでは、XMLHttpRequest を使用してファイルのアップロードを実装します。 コードは Firefox 14 で動作しますが、IE 9 は現在ファイル API をサポートしていないことに注意してください。ここから参加できます。 サーバー側のコードは非常に単純です:

コードをコピーします

コードは次のとおりです:

public class HomeController : Controller { public ActionResult Index()

{

return View()

}
///

/// 指定されたファイルをアップロードします。
///

///
/// ActionResult> ;
[HttpPost]
public ActionResult Upload(HttpPostedFileBase[] fileToUpload)
{
foreach (fileToUpload 内の HttpPostedFileBase ファイル)
{
文字列パス = System.IO.Path.Combine (Server.MapPath("~/App_Data"), System.IO.Path.GetFileName(file.FileName));
file.SaveAs(path); ViewBag.Message = "ファイルは正常にアップロードされました";
return RedirectToAction("Index")
}
}


作成者: Petter Liu