MVC 文件上傳的引導進度條

有沒有一種簡單的方法可以在文件載入時顯示阻塞的 Bootstrap 進度條？

上傳文件時，進度會顯示在 chrome 的狀態欄中：

我希望對話框看起來像這樣

我的動作看起來像這樣：

[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();並在OP 提供的連結myApp.hidePleaseWait();中定義。

（編輯：formData 和 formdata 以前不一致）

引用自：https://stackoverflow.com/questions/24545780