今天小编跟大家讲解下有关HTML5上传文件显示进度的实现代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5上传文件显示进度的实现代码 的相关资料，希望小伙伴们看了有所帮助。
这里我们是结合Asp.net MVC做为服务端 您也可以是其它的服务端语言。让我们看面这个片断的HTML： 复制代码代码如下: @using (Html.BeginForm("Upload","Home", FormMethod.Post, new { enctype ="multipart/form-data", id="form1"})) { <div class="row"> <label for="file"> Upload Image:</label> <input type="file"name="fileToUpload"id="fileToUpload"multiple="multiple"onchange="fileSelected();"/> </div> <div id="fileName"> </div> <div id="fileSize"> </div> <div id="fileType"> </div> <div class="row"> <input type="button"onclick="uploadFile()"value="Upload Image"/> </div> <div id="progressNumber"> </div> } 相关的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) { 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 这里使用XMLHttpRequest实现ajax上传文件。 注意代码在Firefox 14 可以工作 IE 9目前不支持file api 可以参加这里。 服务端的代码很简单： 复制代码代码如下: public class HomeController : Controller { public ActionResult Index() { return View(); } /// <summary> /// Uploads the specified files. /// </summary> /// <param name="fileToUpload">The files.</param> /// <returns>ActionResult</returns> [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"); } } 作者：Petter Liu来源：爱蒂网
