在加载文件时是否有简单的方法显示阻止Bootstrap进度条?
当文件上传时,进度显示在chrome的状态栏中:
我希望对话框看起来像this
我的行动看起来像这样:
[HttpPost] public ActionResult Upload(UploadViewModel model) { using (MemoryStream uploadedFile = new MemoryStream()) { model.File.InputStream.CopyTo(uploadedFile); uploadService.UploadFile(uploadedFile,model.File.ContentType) return View(); } }
模型:
public class UploadViewModel { [Required] public HttpPostedFileBase File { get; set; } }
视图:
@model Bleh.Web.Models.UploadViewModel @using (Html.BeginForm("Upload","Home",FormMethod.Post,new { enctype = "multipart/form-data",@role = "form" })) { <div class="form-group"> @Html.LabelFor(m => m.File) @Html.TextBoxFor(m => m.File,new { type = "file",@class = "form-control" }) <strong>@Html.ValidationMessageFor(m => m.File,null,new { @class = "label label-danger" })</strong> </div> <div class="form-group noleftpadding"> <input type="submit" value="Upload File" class="btn btn-primary" /> </div> }
有没有办法处理浏览器显示的百分比并将其应用到进度条?
解决方法
做ajax进度处理程序做这个工作吗?
function uploadFile(){ myApp.showPleaseWait(); //show dialog var file=document.getElementById('file_name').files[0]; var formData = new FormData(); formData.append("file_name",file); ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress",progressHandler,false); ajax.addEventListener("load",completeHandler,false); ajax.open("POST","/to/action"); ajax.send(formData); } function progressHandler(event){ var percent = (event.loaded / event.total) * 100; $('.bar').width(percent); //from bootstrap bar class } function completeHandler(){ myApp.hidePleaseWait(); //hide dialog $('.bar').width(100); }
注意:myApp.showPleaseWait();和myApp.hidePleaseWait();由OP提供的link中定义.
(编辑:formData和formdata之前是不一致的)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。