Build a file upload progress bar using jQuery in ASP.Net

Here I have created sample that will help you out.

HTML

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

        function ProgressBar() {
            var fileUpload = document.getElementById("ImageFile");
            if (fileUpload.value != "") {
                document.getElementById("divProgress").style.display = "block";
                document.getElementById("divUpload").style.display = "block";
                id = setInterval(progress, 20);
            }
            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>
    <div class="upperColumn">
        <h1>
            File Upload Example</h1>
        <asp:Label ID="lblImageFile" Text="Load Image" AssociatedControlID="ImageFile" runat="server"
            CssClass="lbl" />
        <asp:FileUpload ID="ImageFile" runat="server" />
        <br />
        <br />
        <asp:Button ID="btnAddImage" runat="server" Text="Add Image" OnClick="btnAddImage_Click"
            OnClientClick="return ProgressBar()" />
        <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: orange;
                    display: none">
                </div>
            </div>
            <div style="width: 300pt; text-align: center;">
                <asp:Label ID="lblPercentage" runat="server" Text="Label"></asp:Label></div>
            <br />
            <asp:Label ID="Label1" runat="server" ForeColor="Red" Text=""></asp:Label>
        </div>
    </div>
    <br class="clear" />
    <div class="bottomColumn">
        <asp:DataList ID="dlImageList" RepeatColumns="3" runat="server">
            <ItemTemplate>
                <asp:Image ID="imgShow" ImageUrl='<%# Eval("Value")%>' Style="width: 200px" runat="server"
                    AlternateText='<%# Eval("Text") %>' />
                <br />
                <br />
                <%# Eval("Text")%>
            </ItemTemplate>
            <SeparatorTemplate>
                <hr />
            </SeparatorTemplate>
        </asp:DataList>
    </div>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string[] filePaths = Directory.GetFiles(Server.MapPath("~/UploadImages/"));
        List<ListItem> files = new List<ListItem>();
        foreach (string filePath in filePaths)
        {
            string fileName = Path.GetFileName(filePath);
            files.Add(new ListItem(fileName, "~/UploadImages/" + fileName));
        }
        dlImageList.DataSource = files;
        dlImageList.DataBind();
    }
}

protected void btnAddImage_Click(object sender, EventArgs e)
{
    Thread.Sleep(6000);
    string fileName = Path.GetFileName(ImageFile.PostedFile.FileName);
    ImageFile.PostedFile.SaveAs(Server.MapPath("~/UploadImages/") + fileName);
    Response.Redirect(Request.Url.AbsoluteUri);
}

VB

Protected Sub Page_Load(sender As Object, e As EventArgs)
	If Not IsPostBack Then
		Dim filePaths As String() = Directory.GetFiles(Server.MapPath("~/UploadImages/"))
		Dim files As New List(Of ListItem)()
		For Each filePath As String In filePaths
			Dim fileName As String = Path.GetFileName(filePath)
			files.Add(New ListItem(fileName, Convert.ToString("~/UploadImages/") & fileName))
		Next
		dlImageList.DataSource = files
		dlImageList.DataBind()
	End If
End Sub

Protected Sub btnAddImage_Click(sender As Object, e As EventArgs)
	Thread.Sleep(6000)
	Dim fileName As String = Path.GetFileName(ImageFile.PostedFile.FileName)
	ImageFile.PostedFile.SaveAs(Server.MapPath("~/UploadImages/") & fileName)
	Response.Redirect(Request.Url.AbsoluteUri)
End Sub

Screenshot