关键词：
【中文标题】使用引导进度条以模态显示上传进度【英文标题】：Display Upload Progress in Modal with Bootstrap Progress Bar 【发布时间】：2015-04-20 03:01:02 【问题描述】：我正在构建一个 c# MVC 应用程序，它显示一个表单并允许用户上传一些文件。当用户点击提交时，会出现一个带有进度条的模式，设置为 100% 并显示一条消息“请稍候，等等。”
我希望能够捕获上传过程的进度并将其显示在模态的进度条中。
所以经过一些 Google 搜索后，我想出了this solution，但我不确定如何使其适应我目前的情况。
这是我的代码：
索引.cshtml
<h4>Please fill out the form below and select at least one file to upload.</h4>
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new enctype = "multipart/form-data", id = "upldFrm" ))
<div class="row">
<div class="col-md-2">
<h5>Your Name:</h5>
</div>
<div class="col-md-4">
<input type="text" name="uname" class="form-control" required placeholder="John Smith">
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5>Your Email:</h5>
</div>
<div class="col-md-4">
<input type="email" name="email" class="form-control" required placeholder="test@test.com">
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5>Your Company:</h5>
</div>
<div class="col-md-4">
<input type="text" name="company" class="form-control" required placeholder="Test Company, Inc">
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5>Choose file(s) to upload (Max 500MB):</h5>
</div>
<div class="col-md-4">
<input name="files" type="file" id="files" multiple="multiple" class="form-control" required />
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5></h5>
</div>
<div class="col-md-4">
<input id="sbmtBtn" type="submit" name="submit" value="Upload" class="btn btn-primary" data-toggle="modal" data-target="#myModal" />
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1>Uploading...</h1>
</div>
<div class="modal-body">
Please wait while we are uploading your files
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('sbmtBtn').on('click', function ()
$('#upldFrm').submit();
);
</script>
这是我的控制器
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Net.Mail;
namespace vidup.Controllers
public class HomeController : Controller
public ActionResult Index()
return View();
[HttpPost]
public ActionResult Index(List<HttpPostedFileBase> files)
var userName = Request["uname"].ToString();
var userEmail = Request["email"].ToString();
var userCompany = Request["company"].ToString();
ViewBag.Username = userName;
ViewBag.UserCompany = userCompany;
ViewBag.UserEmail = userEmail;
int i = 0;
var path = Path.Combine(Server.MapPath("~/Uploads"), userCompany, userName, DateTime.Now.ToString("MM-dd-yyyy h-mm-tt"));
if (!Directory.Exists(path))
DirectoryInfo di = Directory.CreateDirectory(path);
foreach (HttpPostedFileBase item in files)
i++;
if (item != null && item.ContentLength > 0)
var fileName = Path.GetFileName(item.FileName);
var fullPath = Path.Combine(path, fileName);
ViewBag.Message3 = fileName;
ViewBag.Message4 = fullPath;
try
item.SaveAs(fullPath);
var fileCount = i + " File(s) uploaded successfully";
ViewBag.Message = fileCount;
catch (Exception e)
ViewBag.Message = e;
else
ViewBag.Message = "No File selected";
return View("Status");
public ActionResult Status()
return View();
编辑：
我尝试在我提供的帖子中添加代码，但出现错误
Uncaught ReferenceError: formdata is not defined
这就是我现在的视图，谁能指导我为什么会出现这个错误？或者如何解决？
<div class="row">
<div class="col-md-2">
<h5>Choose file(s) to upload (Max 500MB):</h5>
</div>
<div class="col-md-4">
<input name="files" type="file" id="files" multiple="multiple" class="form-control" required />
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5></h5>
</div>
<div class="col-md-4">
<input id="sbmtBtn" name="submit" value="Upload" class="btn btn-primary" onclick="submitForm()"/>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1>Uploading...</h1>
</div>
<div class="modal-body">
Please wait while we are uploading your files
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function submitForm()
$('#myModal').modal('show');
var file=document.getElementById('files').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", '@Url.Action("Index","Home")', true)
ajax.send(formdata);
function progressHandler(event)
var percent = (event.loaded / event.total) * 100;
$('.bar').width(percent);
function completeHandler()
$('#myModal').modal('hide');
$('.bar').width(100);
//$('sbmtBtn').on('click', function ()
//
// $('#upldFrm').submit();
//);
</script>
【问题讨论】：
有人可以帮忙吗？或指出我正确的方向？ 这是有争议的事情，但进度条实际上只是为了向用户显示 IMO 正在发生的事情。许多人已经不再使用实际进度，而只是显示“加载轮”或类似的东西。有一个准确的进度条和附加值很少。 【参考方案1】：我使用以下代码来获取进度条，并且仍然让控制器完成上传文件的工作。
在头部我包含了这些脚本
<script src="~/Scripts/jquery-2.1.3.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/modernizr-2.8.3.js"></script>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />
然后是表单的正文和脚本。
@using (Ajax.BeginForm("Index", "Home", new AjaxOptions() HttpMethod = "POST" , new enctype = "multipart/form-data" ))
<div class="row">
<div class="col-md-2">
<h5>Your Name:</h5>
</div>
<div class="col-md-4">
<input type="text" name="uname" class="form-control" required placeholder="John Smith">
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5>Your Email:</h5>
</div>
<div class="col-md-4">
<input type="email" name="email" class="form-control" required placeholder="test@test.com">
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5>Your Company:</h5>
</div>
<div class="col-md-4">
<input type="text" name="company" class="form-control" required placeholder="Test Company, Inc">
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5>Choose file(s) to upload (Max 500MB):</h5>
</div>
<div class="col-md-4">
<input name="files" type="file" id="files" multiple="multiple" class="form-control" required />
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5></h5>
</div>
<div class="col-md-4">
<input id="sbmtBtn" type="submit" name="submit" value="Upload" class="btn btn-primary" />
</div>
</div>
<br />
<div class="progress">
<div class="progress-bar">0%</div>
</div>
<div id="status"></div>
<script>
(function ()
var bar = $('.progress-bar');
var percent = $('.progress-bar');
var status = $('#status');
$('form').ajaxForm(
beforeSend: function ()
status.empty();
status.html("Please Wait While We Upload Your File(s)");
var percentValue = '0%';
bar.width(percentValue);
percent.html(percentValue);
,
uploadProgress: function (event, position, total, percentComplete)
var percentValue = percentComplete + '%';
bar.width(percentValue);
percent.html(percentValue);
,
success: function (d)
var percentValue = '100%';
bar.width(percentValue);
percent.html(percentValue);
$('#fu1').val('');
status.empty();
alert(d);
,
complete: function (xhr)
status.html("You can Upload again or close this page.");
);
)();
</script>
【讨论】：
我喜欢格雷哈默先生动画进度条以显示网页的进度
】动画进度条以显示网页的进度【英文标题】：animatingprogressbartoshowtheprogressofwebpage【发布时间】：2013-08-1202:20:56【问题描述】：我的页面顶部有一个进度条，我希望该条显示网页加载的进度。当整个页面加载时，我希望栏显示10... 查看详情
MVC 文件上传的引导进度条
】MVC文件上传的引导进度条【英文标题】：BootstrapProgressBarforMVCFileUpload【发布时间】：2014-08-2402:38:06【问题描述】：有没有一种简单的方法可以在文件加载时显示阻塞的Bootstrap进度条？上传文件时，进度会显示在chrome的状态栏中... 查看详情
制作进度条以获取 AFNetworking 3.0 的响应
...描述】：我想为api调用制作进度条并以成功结束，我正在使用AFNetworking3.0版本。我执行以下代码来衡量进度。NSURLSessionDataTask*obj=[managerPOST:UrlForGe 查看详情
如何在 Alamofire 4.0 中添加带有上传进度百分比的标签的进度条
】如何在Alamofire4.0中添加带有上传进度百分比的标签的进度条【英文标题】：HowIcanaddprogressbarwithlabelwithpercentageofprogressofuploadinAlamofire4.0【发布时间】：2016-12-3112:01:18【问题描述】：我正在尝试通过Alamofire4.0将视频上传到服务器... 查看详情
使用倒计时日期保存当前进度 - 进度条引导程序 4
】使用倒计时日期保存当前进度-进度条引导程序4【英文标题】：Savethecurrentprogressionwithcountdowndate-progressbarbootstrap4【发布时间】：2021-06-2704:42:42【问题描述】：我想使用进度条引导程序4创建动态倒计时日期进度我们可以设置百... 查看详情
如何使用 C# HttpClient PostAsync 显示上传进度
】如何使用C#HttpClientPostAsync显示上传进度【英文标题】：HowtodisplayuploadprogressusingC#HttpClientPostAsync【发布时间】：2016-02-1016:11:11【问题描述】：我正在使用XamarinPCL创建适用于Android和iOS的文件上传应用程序，并且我已设法实现文件... 查看详情
如何为 Windows 7 编写进度条以在任务栏上进行自我更新？
...应用程序可以通过状态栏报告当前活动的进度。例如，当使用Windows资源管理器复制文件时，任务栏中的应用程序图标上方会出现一个进度条，并在 查看详情
AFNetworking 显示上传进度
...发布时间】：2012-08-2707:29:11【问题描述】：我有一个关于使用AFNetworking和显示上传进度的问题。场景：从表格视图中，用户可以单击一行并进入详细视图。在详细视图中，用户可以上传五张图片。如果用户上传一张图片，上传进... 查看详情
获取 jquery ui 进度条以进行动画处理
】获取jqueryui进度条以进行动画处理【英文标题】：Gettingajqueryuiprogressbartoanimate【发布时间】：2012-08-0214:34:53【问题描述】：这些是用于表示进度条的两个<div>s的代码（jqueryui进度条）：<divstyle="margin-left:10px;margin-righ... 查看详情
如何使用 alamofire 上传多个文件并显示进度？
】如何使用alamofire上传多个文件并显示进度？【英文标题】：Howtouploadmultiplefileusingalamofirewithshowingprogress?【发布时间】：2016-11-1510:15:51【问题描述】：我想将多个文件上传到iOS中的服务器。我有数据作为NSData，我想将它上传到服... 查看详情
等待模态显示时进度条的最佳实践
】等待模态显示时进度条的最佳实践【英文标题】：Bestpracticeforaprogressbarwhilewaitingonamodaltodisplay【发布时间】：2018-06-2615:44:39【问题描述】：我有一个在线应用程序，其功能包括右键单击一个值并在一个小的浮动模式框中返回一... 查看详情
更新引导程序结束安装 MSI 但在进度条上显示 60/70%
...nprogressbar【发布时间】：2020-07-2307:28:50【问题描述】：我使用msi和引导程序创建我的安装程序Wix。我正在测试更新我的程序。并尝试安装新版本。我想总是使用引导程序。我不知道这是否总是如此，但我做了一些调整并为MSI安装... 查看详情
引导进度条未在移动视图中显示
】引导进度条未在移动视图中显示【英文标题】：Bootstrapprogressbarisnotshowinginmobileview【发布时间】：2018-07-2813:42:58【问题描述】：我正在将此代码用于进度条，它在我的笔记本电脑和其他桌面设备上运行良好，但在移动视图中没... 查看详情
文件上传和进度条
...在上传文件时根据读取的文件数量显示进度条。我们如何使用JS和Servlet来实现这一点我知道上传我可以使用apachecommonslib，但如何根据读取的数据显示进度条。我是否应该根据读取的数据量向JS代码发送计数响应，如果可以，如何... 查看详情
Dropzone.js 上传进度条不显示
...howing【发布时间】：2014-05-2003:02:57【问题描述】：我正在使用Dropzone.js进行文件上传，它运行良好，只是没有出现进度条。没有错误。我在网站的前端使用Bootstrap。上传文件后，如果我在Chrome中检查元素，我发现它及其父元素的... 查看详情
retrofit2文件上传下载及其进度显示
序前面一篇文章介绍了Retrofit2的基本使用，这篇文章接着介绍使用Retrofit2实现文件上传和文件下载，以及上传下载过程中如何实现进度的显示。文件上传定义接口123@Multipart@POST("fileService")Call<User>uploadFile(@PartMultipartBody.Partfile... 查看详情
React + Firebase 存储 + 文件上传和进度显示
...像。我被困住了。我该如何显示上传进度？我刚刚意识到使用状态可能不是要走的路，因为我会一遍又一遍地调用setState。你有想法吗？我想我需要某种递归函数，但我 查看详情
快速在 UICollectionView 中显示多个图像上传的进度条
...ift【发布时间】：2016-03-1712:12:34【问题描述】：我有一个使用UICollectionView设计的聊天视图。我已经成功实现了图像上传功能，每当用户使用图像选择器单击图像时，图像就会被上传到服务器。现在我正在尝试为每个 查看详情