HTML5上传文件显示进度实例
发布时间：2018-10-03 22:19:19 所属栏目：创业 来源：站长网
导读：HTML5上传文件显示进度实例一文转自博客园，原文标题为：HTML5上传文件显示进度！ 下面我们使用Html 5的新特性file api实现上传文件，并显示上传文件进度百分比。意图是这样的，当选择文件时，显示当前文件信息。这里我们是结合Asp.net MVC做为服务端，您
|
HTML5上传文件显示进度实例一文转自博客园，原文标题为：HTML5上传文件显示进度！ 下面我们使用Html 5的新特性file api实现上传文件，并显示上传文件进度百分比。意图是这样的，当选择文件时，显示当前文件信息。这里我们是结合Asp.net MVC做为服务端，您也可以是其它的服务端语言。让我们看面这个片断的HTML： Copy to Clipboard 引用的内容：[www.veryhuo.com]
@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是这样的： Copy to Clipboard引用的内容：[www.veryhuo.com]
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，这里使用XMLHttpRequest实现ajax上传文件。 注意代码在Firefox 14 可以工作，IE 9目前不支持file api，可以参阅这里。 服务端的代码很简单： Copy to Clipboard引用的内容：[www.veryhuo.com]
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"); } } （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
