Question

我的应用中有一个上传功能。此函数上载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>

我的脚本：

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

这样做会调出带有进度条的模态对话框，但栏不会更新。

但是，如果我有以下按钮

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

这会打开模态框并更新栏。

我从中可以理解的是，由于上传按钮正在发帖我不能直到完成...... ???

我对JavaScript不太满意所以如果我做的事情非常糟糕，请告诉我......

Answer 1

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

您可以使用常规操作上传文件，然后呈现SignalR页面，显示解析进度（服务器在解析时发送客户端定期更新）。

请参阅this article，了解有关进度条的详细信息。

Answer 2

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

ProgressBar MVC3

2 个答案: