Javascript 向文件上载添加带有进度的进度条

我正在重新设计一个应用程序，我正试图获得一个引导进度条来显示上传进度的百分比，而不是只显示“请稍候”的gif

我想我需要添加一个事件监听器，但我对JavaScript/JQuery不是很熟悉。你能帮我做些什么来得到我想要的最终结果吗

这是我的看法

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Async file upload</h2>
<form action="/api/FileUpload" method="post" enctype="multipart/form-data">
    <div id="uploadControls">
        <div>
            <span>Select file(s) to upload :</span>
            <input id="fileUpload" type="file" multiple="multiple" />
        </div>
        <div>
            <input id="btnUpload" type="button" value="Upload" />
        </div>
        <ul id="uploadResults">

        </ul>
    </div>
    <div id="uploadProgress" class="hidden">
        <img src="/images/ajax-loader.gif" alt="" />
    </div>
</form>

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnUpload").click(OnUpload);
    });

    function ShowUploadControls() {
        $("#uploadControls").show();
        $("#uploadProgress").hide();
    }
    function ShowUploadProgress() {
        $("#uploadControls").hide();
        $("#uploadProgress").show();
    }

    function OnUpload(evt) {
        var files = $("#fileUpload").get(0).files;
        if (files.length > 0) {

            ShowUploadProgress();

            if (window.FormData !== undefined) {
                var data = new FormData();
                for (i = 0; i < files.length; i++) {
                    data.append("file" + i, files[i]);
                }
                $.ajax({
                    type: "POST",
                    url: "/api/FileUpload",
                    contentType: false,
                    processData: false,
                    data: data,
                    success: function (results) {
                        ShowUploadControls();
                        $("#uploadResults").empty();
                        for (i = 0; i < results.length; i++) {
                            $("#uploadResults").append($("<li/>").text(results[i]));
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        ShowUploadControls();
                        alert(xhr.responseText);
                    }
                });
            } else {
                alert("Your browser doesn't support HTML5 multiple file uploads! Please use some decent browser.");
            }
        }
    }


</script>

@{
ViewBag.Title=“Index”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
异步文件上传
选择要上载的文件：


$（文档）.ready（函数（）{
$（“#btnUpload”）。单击（OnUpload）；
});
函数ShowUploadControls（）{
$（“#uploadControls”）.show（）；
$（“#上载进度”）.hide（）；
}
函数ShowUploadProgress（）{
$（“#上载控件”）.hide（）；
$（“#上载进度”）.show（）；
}
功能OnUpload（evt）{
var files=$（“#fileUpload”）.get（0）.files；
如果（files.length>0）{
ShowUploadProgress（）；
if（window.FormData！==未定义）{
var data=new FormData（）；
对于（i=0；i”）.text（results[i]）；
}
},
错误：函数（xhr、ajaxOptions、thrownError）{
ShowUploadControls（）；
警报（xhr.responseText）；
}
});
}否则{
警告（“您的浏览器不支持HTML5多文件上传！请使用合适的浏览器。”）；
}
}
}

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

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

<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（“您可以再次上传或关闭此页面”）；
}
});
})();

这是我使用插件的地方。我不想依赖任何插件，也不想学习这种语言，这样我就可以在其他项目上重用我的知识，也许有一天我可以在这里回答某人的问题。下面是一个如何做到这一点的示例：