显示多个操作的asp.net进度条

时间:2014-06-02 08:05:13

标签: c# asp.net file-upload progress-bar

我需要在网页上显示三个操作的asp.net进度条。首先,当文件上传时,进度条应显示33%并且消息'文件上传已启动'。上传后,它应显示消息“验证文件数据”并进度66%。在第三轮,它应显示99%的“自动匹配数据”。

我有三个方法将被逐个调用。我搜索了很多,但无法找到解决此类问题的方法。有人可以帮忙吗?

1 个答案:

答案 0 :(得分:0)

如果要显示进度条,则需要引入一些java脚本或jquery代码。我正在分享您可以从这里获取想法的示例代码

<form id="form1" runat="server">
    <div style="text-align: left">
        <asp:FileUpload ID="FileUpload1" runat="server" />&nbsp;<br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Upload" OnClientClick="return ProgressBar()" OnClick="Button1_Click" /><br />
        <br />
        <div id="divUpload" style="display: none">
            <div style="width: 300pt; text-align: center;">Uploading...</div>
            <div style="width: 300pt; height: 20px; border: solid 1pt gray">
                <div id="divProgress" runat="server" style="width: 1pt; height: 20px; background-color: Gray; display: none">
                </div>
            </div>
            <div style="width: 300pt; text-align: center;">
                <asp:Label ID="lblPercentage" runat="server" Text="Label"></asp:Label>
            </div>
        </div>
    </div>
    <br />
    <asp:Label ID="Label1" runat="server" ForeColor="Red" Text=""></asp:Label>
</form>

<script language="javascript" type="text/javascript">
    var size = 2;
    var id = 0;

    function ProgressBar() {
        if (document.getElementById('<%=FileUpload1.ClientID %>').value != "") {
            document.getElementById("divProgress").style.display = "block";
            document.getElementById("divUpload").style.display = "block";
            id = setInterval("progress()", 20);
            return true;
        }
        else {
            alert("Select a file to upload");
            return false;
        }
    }

    function progress() {
        size = size + 1;
        if (size > 299) {
            clearTimeout(id);
        }
        document.getElementById("divProgress").style.width = size + "pt";
        document.getElementById("<%=lblPercentage.ClientID %>").
            firstChild.data = parseInt(size / 3) + "%";
    }

</script>

 protected void Button1_Click(object sender, EventArgs e)
{
    // Do code here to saving a file from fileupload control
    //FileUpload1.PostedFile.SaveAs("path");
    System.Threading.Thread.Sleep(8000);
    Label1.Text = "Upload successfull!";
}

以下是源网址 - http://www.codeproject.com/Articles/26668/Showing-progress-bar-while-uploading-a-file-in-an