引导进度条MVC文件上传 [英] Bootstrap Progress Bar for MVC File Upload
问题描述
有没有一种简单的方法来显示阻塞引导进度条,而文件加载?
Is there an easy way to show a blocking Bootstrap progress bar while a file is loading?
进度将在Chrome中状态栏中显示为文件上传:
The progress is shown in the status bar in chrome as the file is uploaded:
我想该对话框看起来像<一个href=\"http://dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap/comment-page-1\">this
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();
}
}
型号:
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>
}
有没有一种简单的方法来处理浏览器显示的百分比,并将其应用到进度条?
Is there an easy way to process the percentage that the browser displays and apply it to the progress bar?
推荐答案
做AJAX进度处理器做的工作?
Do ajax progress handler do the job?
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();
中定义的<一个href=\"http://dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap/comment-page-1\">link由OP提供。
Note: myApp.showPleaseWait();
and myApp.hidePleaseWait();
are defined in the link provided by OP.
这篇关于引导进度条MVC文件上传的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!