下面我们使用的新特性file api实现上传文件，并显示上传文件进度百分比。意图是这样的，当选择文件时，显示当前文件信息。这里我们是结合做为服务端，您也可以是其它的服务端语言。让我们看面这个片断的HTML：
@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" , id="form1"})) { } 相关的Javascript是这样的：
function fileSelected() { var file = document.getElementById('fileToUpload').files[0]; if (file) { 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'; 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').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", "Home/Upload"); xhr.send(fd); } function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; } else { document.getElementById('progressNumber').innerHTML = 'unable to compute'; } } function uploadComplete(evt) { /* This event is raised when the server send back a response */ alert(evt.target.responseText); } function uploadFailed(evt) { alert("There was an error attempting to upload the file."); } function uploadCanceled(evt) { alert("The upload has been canceled by the user or the browser dropped the connection."); } 上面是就原生的Javascript，在onchange事件执行fileSelected的function，在点击button执行了uploadFile的function，这里使用实现ajax上传文件。 注意代码在Firefox 14 可以工作，IE 9目前不支持file api，可以参加。 服务端的代码很简单：
public class HomeController : Controller { public ActionResult Index() { return View(); } /// /// Uploads the specified files. /// /// The files. /// ActionResult [HttpPost] public ActionResult Upload(HttpPostedFileBase[] fileToUpload) { foreach (HttpPostedFileBase file in fileToUpload) { string path = System.IO.Path.Combine(Server.MapPath("~/App_Data"), System.IO.Path.GetFileName(file.FileName)); file.SaveAs(path); } ViewBag.Message = "File(s) uploaded successfully"; return RedirectToAction("Index"); } } 文章来自：http://www.cnblogs.com/wintersun/archive/2012/08/30/2663408.html
补充：
JS XMLHttpRequest.upload.addEventListener 传参，回调
// 原来 xhr.upload.addEventListener("progress", uploadProgress, false);xhr.upload.addEventListener("load", function (event) { uploadProgress(event) }, false);
通过event获取文件属性
JSON.parse(event.target.responseText);
例如：xhr.upload.addEventListener("load", function (event) { uploadProgress(JSON.parse(event.target.responseText)) }, false);