asp.net-mvc MVC 文件上传的 Bootstrap 进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24545780/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Progress Bar for MVC File Upload
提问by woggles
Is there an easy way to show a blocking Bootstrap progress bar while a file is loading?
有没有一种简单的方法可以在加载文件时显示阻塞的 Bootstrap 进度条？
The progress is shown in the status bar in chrome as the file is uploaded:
上传文件时，进度会显示在 chrome 的状态栏中：
I'd like the dialog to look something like this
我希望对话框看起来像这样
My Action looks something like 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();
}
}
Model:
模型：
public class UploadViewModel
{
[Required]
public HttpPostedFileBase File { get; set; }
}
View:
看法：
@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>
}
Is there an easy way to process the percentage that the browser displays and apply it to the progress bar?
有没有一种简单的方法来处理浏览器显示的百分比并将其应用于进度条？
回答by vusan
Do ajax progress handler do the job?
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);
}
Note: myApp.showPleaseWait();and myApp.hidePleaseWait();are defined in the linkprovided by OP.
注意：myApp.showPleaseWait();和myApp.hidePleaseWait();在OP 提供的链接中定义。
(edit: formData and formdata was previously inconsistent)
（编辑：formData 和 formdata 以前不一致）
