C# 使用引导进度条在模式中显示上载进度

我正在构建一个c#MVC应用程序，它提供一个表单并允许用户上传一些文件。当用户单击submit（提交）时，将显示一个带有进度条的模式，设置为100%，并显示一条消息“请稍候，等等”

我希望能够捕获上传过程的进度，并将其显示在modal的进度栏中

所以，在谷歌搜索了一段时间后，我想出了一个办法，但我不确定如何适应我目前的情况

这是我的密码：

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>

这就是我现在的观点，有人能告诉我为什么我会犯这个错误吗？或者如何解决呢

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

选择要上载的文件（最大500MB）：
}
上传。。。
正在上载您的文件，请稍候
函数submitForm（）{
$（'myModal'）.modal（'show'）；
var file=document.getElementById（'files'）.files[0]；
var formData=new formData（）；
formdata.append（“文件名”，文件）；
ajax=新的XMLHttpRequest（）；
addEventListener（“progress”，progressHandler，false）；
addEventListener（“加载”，completeHandler，false）；
open（“POST”，@Url.Action（“Index”，“Home”），true）
发送（formdata）；
}
函数progressHandler（事件）{
变量百分比=（event.loaded/event.total）*100；
$（'.bar'）。宽度（百分比）；
}
函数completeHandler（）{
$（'#myModal'）.modal（'hide'）；
$（'.bar'）。宽度（100）；
}
//$（'sbmtBtn'）。在（'click'，函数（）
//{
//$（'#upldFrm'）。提交（）；
//});

我使用以下代码获取进度条，但仍让控制器完成上传文件的工作

在我的头脑中包括了这些脚本

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

@使用（Ajax.BeginForm（“Index”，“Home”，新的AjaxOptions（）{HttpMethod=“POST”}，新的{enctype=“multipart/form data”}））
{
你的名字：
您的电子邮件：
贵公司：
选择要上载的文件（最大500MB）：
}


0%
（功能（）{
变量栏=$（'.progressbar'）；
变量百分比=$（'.progress bar'）；
变量状态=$（“#状态”）；
$（'form'）.ajaxForm({
beforeSend:函数（）{
status.empty（）；
html（“请稍候，我们正在上载您的文件”）；
var percentValue='0%'；
条形宽度（百分比值）；
html（percentValue）；
},
上载进度：功能（事件、位置、总数、完成百分比）{
var percentValue=percentComplete+“%”；
条形宽度（百分比值）；
html（percentValue）；
},
成功：功能（d）{
var percentValue='100%'；
条形宽度（百分比值）；
html（percentValue）；
$（'fu1'）.val（''）；
status.empty（）；
警戒（d）；
},
完成：函数（xhr）{
html（“您可以再次上传或关闭此页面”）；
}
});
})();

有人能帮忙吗？或者给我指出正确的方向？这是一个值得讨论的问题，但进度条实际上只是向用户显示正在发生的事情。许多人已经不再使用实际进度，而只是显示“加载轮”或类似的内容。有一个准确的进度条需要很多开销，附加值很少。我喜欢格雷哈默先生

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