Bootstrap-Fortschrittsbalken für MVC-Datei-Upload

Question

Gibt es eine einfache Möglichkeit, eine blockierende Bootstrap-Statusleiste anzuzeigen, während eine Datei geladen wird?

wird der Fortschritt in der Statusleiste in Chrom gezeigt, wie die Datei hochgeladen:

ich den Dialog so etwas wie this

aussehen möchte My Die Aktion sieht ungefähr so ​​aus:

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

Modell:

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

Ausblick:

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

Gibt es einen einfachen Weg, um den Prozentsatz, dass der Browser angezeigt und es auf den Fortschrittsbalken zu verarbeiten?

Answer 1

Tun ajax Fortschritt Handler die Arbeit?

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

Anmerkung: myApp.hidePleaseWait();myApp.showPleaseWait(); und werden in der durch den OP vorgesehen link definiert.

(edit: Formdata und Formulardaten bisher unvereinbar war)