web-dev-qa-db-ja.com

Bootstrap MVCファイルアップロードの進行状況バー

ファイルのロード中にブロッキングBootstrapプログレスバーを表示する簡単な方法はありますか？

ファイルがアップロードされると、進捗状況がchromeのステータスバーに表示されます。

The progress is shown in chrome as the file is uploaded

ダイアログを次のようにしたい this

enter image description here

私のアクションは次のようになります：

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

ブラウザーが表示するパーセンテージを処理して、進行状況バーに適用する簡単な方法はありますか？

asp.net-mvctwitter-bootstrapfile-uploadtwitter-bootstrap-3progress-bar
18
woggles

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が提供する link で定義されています。

（編集：formDataとformdataは以前は矛盾していた）

34
vusan