asp.net-mvc – 用于MVC文件上传的Bootstrap进度条

发布时间：2020-12-15 23:40:45 所属栏目：asp.Net 来源：网络整理

导读：在加载文件时是否有简单的方法显示阻止Bootstrap进度条？当文件上传时,进度显示在chrome的状态栏中：我希望对话框看起来像this 我的行动看起来像这样： [HttpPost] public ActionResult Upload(UploadViewModel model) { using (MemoryStream uploadedFile

在加载文件时是否有简单的方法显示阻止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>
}

有没有办法处理浏览器显示的百分比并将其应用到进度条？

解决方法

做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之前是不一致的)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!