Блог

Есть ли простой способ показать блокирующий индикатор выполнения начальной загрузки во время загрузки файла?

Прогресс отображается в строке состояния в Chrome по мере загрузки файла:

Я бы хотел, чтобы диалоговое окно выглядело примерно так

Мое действие выглядит примерно так:

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

Модель:

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

Вид:

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

Есть ли простой способ обработать процент, отображаемый браузером, и применить его к индикатору выполнения?

Выполняет ли обработчик выполнения ajax эту работу?

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

Примечание: myApp.showPleaseWait(); и myApp.hidePleaseWait(); определены в ссылке, предоставленной OP.

(редактировать: FormData и formdata ранее были несовместимы)

Для тех, кто все еще ищет другое решение, вот оно:

 function showPleaseWait() {

    if (document.querySelector("#pleaseWaitDialog") == null) {
        var modalLoading = '<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Please wait...</h4>
                </div>
                <div class="modal-body">
                    <div class="progress">
                      <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
                      aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%; height: 40px">
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>';
        $(document.body).append(modalLoading);
    }

    $("#pleaseWaitDialog").modal("show");
}

/**
 * Hides "Please wait" overlay. See function showPleaseWait().
 */
function hidePleaseWait() {
    $("#pleaseWaitDialog").modal("hide");
}
 $('#load').click(function () {
    showPleaseWait();
});
  

И назовите это так :

 <button id="load">Load It!</button>
  

если вы хотите скрыть это, обязательно вызовите hidePleaseWait() после успешного завершения.