HTML5 업로드 파일_html5 튜토리얼 기술의 진행 상황을 표시하기 위한 구현 코드

여기서는 Asp.net MVC를 서버로 결합하고 있으며 다른 서버 언어도 사용할 수 있습니다. 이 조각의 HTML을 살펴보겠습니다.

코드 복사

코드는 다음과 같습니다.

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

이미지 업로드:

< ;div id="fileSize">

"행"> ;

}


관련 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 = '유형: ' file .type;
}
}
function uploadFile() {
var fd = new FormData()
fd.append("fileToUpload", document. getElementById('fileToUpload').files[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" , "홈/업로드") ;
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var ratesComplete = 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()

}

///

/// 지정된 파일을 업로드합니다.
///
/// 파일. ;returns>ActionResult> ;
[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 = "파일(들)이 성공적으로 업로드되었습니다";
redirectToAction("Index")
}
}


작성자: Petter Liu