使用Bootstrap进度栏在模态中显示上传进度 [英] Display Upload Progress in Modal with Bootstrap Progress Bar
本文介绍了使用Bootstrap进度栏在模态中显示上传进度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个正在构建的c#MVC应用程序，该应用程序呈现一个表格并允许用户上传一些文件.当用户单击提交"时，会出现一个带有进度条的模式，设置为100％，并显示一条消息，请稍等".
I have an c# MVC application that I'm building, that presents a form and allows the user to upload some files. When the user clicks submit a modal appears with a progress bar, set to 100% and displays a message of "please wait, ect. "
我希望能够捕获上载过程的进度并将其显示在模式的进度栏中.
I want to be able to capture the progress of the upload process and display it in the modal's progress bar.
因此，经过Google的一些搜索后，我想到了此解决方案，但我不确定如何使其适应当前情况.
So after a bit of Google searches I've come up with this solution, but I'm unsure how to adapt it to my current situation.
这是我的代码:
Index.cshtml
Index.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();
}
}
}
我尝试添加我提供的帖子中的代码，但是我收到了错误
I have tried to add in the code from the post i provided, but im getting a error
Uncaught ReferenceError: formdata is not defined
这是我现在的视图，任何人都可以指导我为什么我会收到此错误?或如何解决?
This is what my view looks like now, can anyone direct me on why I'm getting this error? Or how to resolve it?
<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>
推荐答案
我使用以下代码获取进度栏，但仍然让控制器完成上传文件的工作.
I used the following code to get the Progress bar and still have the controller do the work for uploading the file.
我在脑海中包括了这些脚本
In the Head I included these scripts
<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" />
然后是表单和脚本的正文.
Then the body of the form and the scripts.
@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>
这篇关于使用Bootstrap进度栏在模态中显示上传进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
