Javascript ProgressBar MVC3

我的应用程序中有一个上传功能。此函数用于上载excel文件并对其进行解析，然后将数据复制到数据库中。实际上传的时间并不长，但解析的时间很长。我想有一个进度条，这样我可以给用户一些费用回来

我不太清楚该怎么做。我在网上找到的东西没那么有用

这就是我到目前为止所拥有的

我的看法是：

<div>
    @using (Html.BeginForm("Upload", "Administrator", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.ValidationSummary(true, "File upload was unsuccessful. Please correct the errors and try again.")
        <input type="file" name="FileUpload1" />
        <input type="submit" name="Submit" id="Submit" value="Upload" onclick=" return startUpload();"/>
    }
</div>
<input type="button" value="test" onclick=" return startUpload();"/>
<div id="loadingScreen" title="Loading...">
    <div id="progressbar"></div>
</div>

@使用（Html.BeginForm（“Upload”、“Administrator”、FormMethod.Post、new{enctype=“multipart/formdata”}））
{
@Html.ValidationSummary（true，“文件上载失败。请更正错误并重试。”）
}

我的脚本：

<script type="text/javascript">

$(document).ready(function() {
    // create the loading window and set autoOpen to false
    $("#loadingScreen").dialog({
        autoOpen: false,    // set this to false so we can manually open it
        dialogClass: "loadingScreenWindow",
        closeOnEscape: false,
        draggable: false,
        minWidth: 30,
        minHeight: 30,
        modal: true,
        buttons: {},
        resizable: false,
        open: function(event, ui) {
            $(".ui-dialog-titlebar-close").hide();
        },
    }); // end of dialog
});
    $(function () {
        //Progressbar initialization
        $("#progressbar").progressbar({ value: 0 });
    });

    function startUpload() {
        if (confirm("Doing this will override any previous data. Are you sure you want to proceed?")) {
            $("#loadingScreen").dialog('open');
            startProgressBar();
            return true;
        } else {
            return false;
        }
    }
    function startProgressBar() {
        //Making sure that progress indicate 0
        $("#progressbar").progressbar('value', 0);
        //Setting the timer
        setTimeout("updateProgressbar()", 500)
    };

    function updateProgressbar() {
        $.get('@Url.Action("UploadProgress")', function (data) {
            alert(data);
            //Updating progress
            $("#progressbar").progressbar('value', data);
            setTimeout("updateProgressbar()", 500)
        });
    };
</script>

$（文档）.ready（函数（）{
//创建加载窗口并将autoOpen设置为false
$（“#加载屏幕”）。对话框({
autoOpen:false，//将其设置为false，以便手动打开它
dialogClass:“loadingScreenWindow”，
closeOnEscape：错误，
可拖动：错误，
最小宽度：30，
身高：30，
莫代尔：是的，
按钮：{}，
可调整大小：false，
打开：功能（事件、用户界面）{
$（“.ui对话框标题栏关闭”）.hide（）；
},
})；//对话框结束
});
$（函数（）{
//Progressbar初始化
$（“#progressbar”）.progressbar（{value:0}）；
});
函数startupboad（）{
如果（确认（“执行此操作将覆盖任何以前的数据。是否确实要继续？”）{
$（“#加载屏幕”）。对话框（“打开”）；
startProgressBar（）；
返回true；
}否则{
返回false；
}
}
函数startProgressBar（）{
//确保进度指示为0
$（“#progressbar”）.progressbar（'value'，0）；
//设置计时器
setTimeout（“updateProgressbar（）”，500）
};
函数updateProgressbar（）{
$.get（'@Url.Action（“UploadProgress”）'，函数（数据）{
警报（数据）；
//更新进度
$（“#progressbar”）.progressbar（'值'，数据）；
setTimeout（“updateProgressbar（）”，500）
});
};

这样做的目的是打开带有进度条的模式对话框，但该条不会得到更新

但是，如果我有以下按钮

<input type="button" value="test" onclick=" return startUpload();"/>

这将打开模式框并更新栏

我能从中了解到的是，由于上传按钮正在做一个帖子，我无法得到一个直到完成

---

我不太习惯使用JavaScript，所以如果我正在做一些非常糟糕的事情，请让我知道…

这可能有些过分，但您可以使用。这是一个专门用于服务器和客户端之间实时通信的库

您可以使用常规操作上载文件，然后呈现一个显示解析进度的信号器页面（服务器在解析时发送客户端常规更新）

---

有关进度条的详细介绍，请参见。

有一个漂亮且简单的进度条，它只是HTML+CSS+JavaScript。您必须调用JavaScript函数来刷新滑块。请在此处查找说明：

这可能会对您有所帮助。。 只需在提交单击时调用fadeIn（）方法

$('Submit').click(function () {<br />
    $("#loadingScreen").fadeIn();<br />
});

$（'Submit'）。单击（函数（）{

$（“#加载屏幕”）.fadeIn（）；

});