MVC Dosya Yükleme için Bootstrap İlerleme Çubuğu

Question

Dosya yüklenirken engelleme Bootstrap ilerleme çubuğunu göstermenin kolay bir yolu var mı? Dosya yüklendikten olarak

ilerleme krom durum çubuğunda gösterilir:

Ben this

gibi bir şey için iletişim kutusunu istiyorum Benim Eylem şu şekilde görünüyor:

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

Modeli:

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

Görünüm:

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

yüzdesini tarayıcı görüntüler işlemek ve ilerleme çubuğuna uygulamak için kolay bir yol var mı?

Answer 1

ajax ilerleme işleyicisi işi yapıyor mu?

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

Not: myApp.showPleaseWait(); ve myApp.hidePleaseWait(); OP sağladığı link tanımlanmıştır.

(düzenleme: formData ve formdata daha önce tutarsız)