Announcement

Collapse
No announcement yet.

CSS Progress bar and FileUpload

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS Progress bar and FileUpload

    Hello

    I have a 'FileUpload' on a Web page:

    Code:
     <asp:FileUpload runat="server" ID="MyFileUpload" CssClass="FileUpload"/><br />
    The CSS, FileUpload, is simply:

    Code:
    .FileUpload
    {
    	margin-left:130px;
    	margin-top:50px;
    }
    I also have a nice CSS script that shows the upload progress of a file in percentage terms, so that when the file is half uploaded it will show 50%, fully uploaded 100% (and all the divisions in between).

    How would I link Visual Studio's FileUpload feature with the CSS percentage script, please? For example, I wouldn't want the CSS to show 100% if the file were still being uploaded - they would need to correspond: the CSS percentage should show a precise numerical value according to the actual progress of the file being uploaded.

    Thanks!

  • #2
    This Might Help...

    Progress bar
    HTML Code:
    <html>
     <head>
      <script id='percentstructure'>
        var x = "<style>"; for (var a = 0; a < 100; a++) {
        x+=".percent"+a+" { width: "+a+"%; height:100%; } " };
        x+= "</style>";document.write(x);    
      </script>
     </head>
     <body>
      <div style='width:400px;height:20px;background-color:darkred;'>
        <div id='perc1' class='percent0' style="background-color:blue;color:white;">&nbsp;</div>
      </div>
      <script>
        var percvalue = 0;
        setInterval(function() { percvalue++;
            if (percvalue>100) { percvalue=0; };
            document.getElementById("perc1").className="percent"+percvalue;
            document.getElementById("perc1").innerHTML="&nbsp;"+percvalue+"%";
        },100)
      </script>
     </body>
    </html>
    Last edited by Structure; 01-19-2016, 01:13 PM.

    Comment


    • #3
      Thank you.

      I will try it.

      Is that JavaScript?

      Comment


      • #4
        Is that JavaScript?
        Yes.

        Comment


        • #5

          Code:
          <form id="form1" runat="server">
          <asp:FileUpload id="***" runat="server" />
          <asp:Button runat="server" id="UB" text="Upload" onclick="UB_Click" />
          <br /><br />
          <asp:Label runat="server" id="StatusLabel" text="Upload status: " />
          </form>




          And here is the CodeBehind code required to handle the upload:

          protected void UB_Click(object sender, EventArgs e)
          {
          if(***.HasFile)
          {
          try
          {
          string filename = Path.GetFileName(***.FileName);
          ***.SaveAs(Server.MapPath("~/") + filename);
          StatusLabel.Text = "Upload status: File uploaded!";
          }
          catch(Exception ex)
          {
          StatusLabel.Text = "Upload status: The file could not be uploaded. The following error occured: " + ex.Message;
          }
          }
          }

          Comment

          Working...
          X