Bootstrap Barra de Progreso para MVC de Carga de Archivos

Hay una manera fácil de mostrar un bloqueo de Bootstrap barra de progreso mientras el archivo se está cargando?

El progreso se muestra en la barra de estado en chrome como el archivo es subido:

Me gustaría el cuadro de diálogo para buscar algo como este

Bootstrap Barra de Progreso para MVC de Carga de Archivos

Mi Acción se ve algo como esto:

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

Modelo:

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

Hay una manera fácil de procesar el porcentaje que el navegador muestra y aplicarlo a la barra de progreso?

Se puede mostrar cómo terminó usando la función, en su opinión, por favor?

OriginalEl autor woggles | 2014-07-03

1 Comentario

Hacer ajax progreso controlador de hacer el trabajo?

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(); y myApp.hidePleaseWait(); se definen en el enlace proporcionada por OP.

(edit: formData y formdata anteriormente era inconsistente)

Que es formdata?
Uy var formData faltaba. He añadido gracias.
¿Cómo se utiliza esto en la vista. Podría dar y el ejemplo por favor?
La vista es en el twitter bootstrap enlace. He añadido el cuadro de diálogo mostrar/ocultar en mi post.
Forma más sencilla de manejar la barra de progreso. Gracias @vusan

OriginalEl autor vusan

1 Comentario

Dejar respuesta Cancelar respuesta