0

我的应用程序中有上传功能。此函数上传一个 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 不太满意，所以如果我正在做一些非常可怕的事情，请告诉我......

4

3 回答 3

2

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

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

有关进度条的详细介绍，请参阅本文。

于 2012-05-16T21:03:05.717 回答
0

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

于 2012-07-03T13:07:16.400 回答
0

可能这会对您有所帮助.. 只需在您的提交单击上调用 fadeIn() 方法。

$('Submit').click(function () {<br />
    $("#loadingScreen").fadeIn();<br />
});
于 2015-04-22T10:25:59.963 回答