如何为上传功能充值进度条

Question

我已经设置了一个这样的上传功能 aspx

 <table width="100%" class="border" cellpadding="2" cellspacing="1">
        <tr>
            <th colspan="5" align="left">Upload</th>
        </tr>
        <tr>
             <asp:Label ID="lblErrorUpload" runat="server" CssClass="errMsg" />
        </tr>
        <tr>
            <asp:Button runat="server" ID="fUpload" Text="Upload" OnClick="btnUpload_Click" />
        </tr>
       </table> 

aspx.cs

protected void btnUpload_Click(object sender, EventArgs e)
{

    if (!Directory.Exists(Server.MapPath("Temp")))
        Directory.CreateDirectory(Server.MapPath("~/UploadFile/Temp"));

    string sourceFileName = string.Format("{0}myfile.xlsx", Server.MapPath("~/UploadFile/Temp\\"));
    if (Path.GetExtension(fUpload.PostedFile.FileName) != ".xlsx")
    {
        lblErrorUpload.Text = "The extension is invalid, please upload with file with .xlsx";
    }
    else
    {
        fUpload.SaveAs(sourceFileName);
    }
}

只是简单的功能。我怎样才能为此充值进度条？

Answer 1

标准工具无法实现像 c# 中的进度条。

看看这个项目：https://spin.js.org/。当您单击按钮时，只要上传正在处理，就会显示一个 div。

项目的简短示例

插入你的 aspx 头部：

<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> //or any newer version
<script src="Scripts/spin.js" type="text/javascript"></script>

 <script type="text/javascript">
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        }
    </script>

进入你的aspx head部分的样式部分：

.modal
    {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 99;
        opacity: 0.8;
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        min-height: 100%;
        width: 100%;
    }
    .loading
    {
        font-family: Verdana;
        font-size: 10pt;
        color: Red;
        border: 5px solid #376a8f;
        width: 325px;
        height: 130px;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }

在你的 aspx 正文部分的底部：

 <div class="loading" align="center">
                <br
                    <span class="style9"><strong>Uploading, please wait</strong></span><br />

                    <div id="foo"></div> 
                </div>

                <script>
                    var opts = {
                        lines: 12, // The number of lines to draw
                        length: 7, // The length of each line
                        width: 5, // The line thickness
                        radius: 10, // The radius of the inner circle
                        corners: 1, // Corner roundness (0..1)
                        rotate: 0, // The rotation offset
                        direction: 1, // 1: clockwise, -1: counterclockwise
                        color: '#376a8f', // #rgb or #rrggbb or array of colors
                        speed: 1, // Rounds per second
                        trail: 60, // Afterglow percentage
                        shadow: false, // Whether to render a shadow
                        hwaccel: false, // Whether to use hardware acceleration
                        className: 'spinner', // The CSS class to assign to the spinner
                        zIndex: 2e9, // The z-index (defaults to 2000000000)
                        top: '50%', // Top position relative to parent
                        left: '50%' // Left position relative to parent
                    };
                    var target = document.getElementById('foo');
                    var spinner = new Spinner(opts).spin(target);
                </script>

最后将OnClientClick 添加到您的Button：

<asp:Button runat="server" ID="fUpload" Text="Upload" OnClick="btnUpload_Click" OnClientClick="ShowProgress();return true;"/>

这会在上传文件时显示一个旋转的圆圈和文本。您可以调整页面上描述的文字和颜色等。