Barre de progression Bootstrap pour le téléchargement de fichier MVC

Est-il un moyen facile de montrer un blocage de l'Amorçage de la barre de progression alors qu'un fichier est en cours de chargement?

La progression est affichée dans la barre d'état en chrome que le fichier est téléchargé de:

J'aimerais la boîte de dialogue à ressembler à quelque chose comme cette

Mon Action ressemble à quelque chose comme ceci:

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

Modèle:

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

Vue:

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

Est-il un moyen facile de traiter le pourcentage que le navigateur affiche et l'appliquer à la barre de progression?

source d'informationauteur woggles | 2014-07-03

Ne ajax progrès gestionnaire de faire le travail?

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

Remarque: myApp.showPleaseWait(); et myApp.hidePleaseWait(); sont définis dans le lien fournis par les OP.

(edit: formData et formdata était auparavant incompatibles)

Vous devez vous connecter pour publier un commentaire.