在加载文件时是否有简单的方法显示阻止Bootstrap进度条？
我希望对话框看起来像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之前是不一致的)
