Barra di avanzamento Bootstrap per caricamento file MVC

Question

Esiste un modo semplice per mostrare una barra di avanzamento di Bootstrap bloccante durante il caricamento di un file?

Il progresso è mostrato nella barra di stato in cromo come il file viene caricato:

mi piacerebbe la finestra a guardare qualcosa di simile this

mio L'azione è simile a questa:

[HttpPost] 
     public ActionResult Upload(UploadViewModel model) 
     { 
       using (MemoryStream uploadedFile = new MemoryStream()) 
       { 
        model.File.InputStream.CopyTo(uploadedFile);        
        uploadService.UploadFile(uploadedFile, model.File.ContentType) 
        return View(); 
       } 
     } 

Modello:

public class UploadViewModel 
    { 
     [Required] 
     public HttpPostedFileBase File { get; set; } 
    } 

Vista:

@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> 
} 

C'è un modo semplice per elaborare la percentuale che i display del browser e applicarlo alla barra di avanzamento?

Answer 1

Un gestore di avanzamento ajax fa il lavoro?

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); 
} 

Nota: myApp.showPleaseWait(); e myApp.hidePleaseWait(); sono definiti nel link fornito da OP.

(edit: formdata e formdata era precedentemente incoerente)