MVC 文件上传的引导进度条

Posted 2023-03-22

【中文标题】MVC 文件上传的引导进度条

【英文标题】：Bootstrap Progress Bar for MVC File Upload

【发布时间】：2014-08-24 02:38:06

【问题描述】：

有没有一种简单的方法可以在文件加载时显示阻塞的 Bootstrap 进度条？

上传文件时，进度会显示在 chrome 的状态栏中：

我希望对话框看起来像 this

我的操作看起来像这样：

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

有没有一种简单的方法来处理浏览器显示的百分比并将其应用于进度条？

【问题讨论】：

您能否在您的视图中展示您最终是如何使用该功能的？

【参考方案1】：

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之前不一致）

【讨论】：

如何在视图中使用这个。你能提供和例子吗？

视图在 twitter 引导程序 link 中。我在帖子中添加了对话框显示/隐藏。

处理进度条的最简单方法。谢谢@vusan

【参考方案2】：

对于那些仍在寻找其他解决方案的人来说：

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()。