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:

Bootstrap Barra de Progreso para MVC de Carga de Archivos

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 Kommentar

  1. 29

    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

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea

Java Core
PHP

Preguntas relacionadas

no puede conseguir twitter bootstrap barra de navegación, para el trabajo?

He mirado a través de un montón de tutoriales, y he leído un montón de respuestas a las preguntas aquí. No puedo entender lo...
Weiterlesen

Bootstrap Desplegable Hacer flecha Desplegable cambiar de Dirección

Estoy buscando una manera de hacer el mismo menú desplegable de flecha cambiar las direcciones de mirar hacia arriba cuando el menú es cerrado...
Weiterlesen

ASP.NET MVC Menú Elemento Seleccionado

ACEPTAR de nuevo a MVC. Yo le había pedido este pregunta anterior y recibió una respuesta, pero me pregunto si hay una solución más...
Weiterlesen
©