Click here to Skip to main content
15,881,559 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
Hi,

In my application when user upload an file of any size(< 1GB) i need to show an progress bar of how much contents are uploaded like that.
Also i need to do this with "multi file uploads"....hence i go with Jquery multi Class.

Uploads are working fine, problem is with progress bar is not showing even i set its visibility='visible'
I used 'HIDDEN FIELD' for getting server uploded contents from server side.

Please help me out...i'm stuck here for one whole day :(
Here is my Code...


XML
//My 'Upload.aspx'


<script language="javascript" type="text/javascript">
    var t;

function DoTimer() {
    var content = document.getElementById('ctl00_Adminmaster_HidContentLength');
    var upload = document.getElementById('ctl00_Adminmaster_HidUploadedLength');

    //if (parseFloat(content.value) != '0' && parseFloat(upload.value) != '0') {

        var total = parseFloat(content.value);
        var upload = parseFloat(upload.value);
        var status = parseFloat((upload / total) * 100).toFixed(2);
//        alert(status);
        if (status != 'NaN') {
            alert('csss');
            var container = document.getElementById('dvProgressContainer');
            container.style.visibility = 'visible';
            var one = document.getElementById('dvProgressPrcent');
            one.innerHTML = status + '%';
            var two = document.getElementById('dvProgress');
            two.style.width = status + '%';
        }
        t = setTimeout("DoTimer()", 500);
    //}
}

function OnUpload(b) {
    DoTimer();
    b.style.visibility = "hidden";
}
</script>



<style type="txt/css">
#dvProgressContainer
{
    width: 500px;
    height: 18px;
    visibility:hidden;
}
#dvProgBorder
{
    border-left: solid 1px #CFCFCF;
    border-right: solid 1px #CFCFCF;
    width: 500px;
    height: 18px;

}
#dvProgress
{
    background-image: url(../Images/Progressbar_Content.gif);
    height: 18px;
    width: 0px;
}
</style>


<asp:HiddenField ID="HidUploadedLength" runat="server" />
        <asp:HiddenField ID="HidContentLength" runat="server" />


 <asp:FileUpload ID="FileUpload1" runat="server" class="multi"
                ForeColor="#3333CC" Width="350px" />


<pre><asp:ImageButton ID="but_upload" runat="server" 
                    ImageUrl="~/images/upload_btn.jpg" onclick="but_upload_Click1"/>



<div id="dvProgressContainer">
<div id="dvProgBorder">
<div id="dvProgress">
</div>
</div>
<div id="dvProgressPrcent">
<strong>0%</strong>
</div>
</div>


//My 'Upload.aspx.cs


protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            HidContentLength.Value = "0"; HidUploadedLength.Value = "0";
            but_upload.Attributes.Add("onclick", "javascript : return OnUpload(this);");            
        }
               
    }

  protected void but_upload_Click1(object sender, ImageClickEventArgs e)
   {
       bool flg = false;
       {
           // Do code here to saving a file from fileupload control
           try
           {
               // Get the HttpFileCollection
               HttpFileCollection hfc = Request.Files;

               int c = 0;
               for (int k = 0; k < hfc.Count; k++)
               {
                   HttpPostedFile hhpf = hfc[k];
                   c += hhpf.ContentLength;
               }

               HidContentLength.Value = c.ToString();

               int bufferSize = 1;
               byte[] buffer = new byte[bufferSize];

               double UploadedLength = 0, ContentLength = 0, FinalLength = 0;

               for (int i = 0; i < hfc.Count; i++)
               {
                   HttpPostedFile hpf = hfc[i];

                   if (hpf.ContentLength > 0)
                   {
                       string str = System.IO.Path.GetFileName(hpf.FileName);

                       using (FileStream fs = new FileStream("D:\\Elan\\" + System.IO.Path.GetFileName(hpf.FileName), FileMode.Create))
                       {
                           UploadedLength = 0; ContentLength = hpf.ContentLength;
                           while (UploadedLength < ContentLength)
                           {
                               //Fill the buffer from the input stream                                
                               int bytes = hpf.InputStream.Read(buffer, 0, bufferSize);
                               //Writing the bytes to the file stream
                               fs.Write(buffer, 0, bytes);
                               //Update the number the webservice is polling on to the session
                               UploadedLength += bytes;

                               FinalLength += UploadedLength;

                               HidUploadedLength.Value = FinalLength.ToString();
                           }
                       }

                       flg = true;
                   }
                   else
                   {
                       string script = "<script>alert('Choose File to Upload !');</script>";
                       ScriptManager.RegisterStartupScript(this, this.GetType(), "KeyClient", script.Trim(), false);

                   }
               }               

           }
           catch (Exception ex)
           {
               FTP.ErrorLog.WriteError("Upload.aspx.cs", "Button1_Click", ex.ToString());
               string script = "<script>alert('File Upload Failed !');</script>";
               ScriptManager.RegisterStartupScript(this, this.GetType(), "KeyClient", script.Trim(), false);
           }

           if (flg)
           {
               string script = "<script>alert('File Uploaded Successfully');</script>";

               ScriptManager.RegisterStartupScript(this, this.GetType(), "KeyClient", script.Trim(), false);
           }
       }
   }
Posted
Updated 29-Jan-12 4:51am
v3

You do this:

C#
function OnUpload(b) {
    DoTimer();
    b.style.visibility = "hidden";
}


and then

C#
but_upload.Attributes.Add("onclick", "javascript : return OnUpload(this);");


I can´t find the but_upload in your code. if that would be a button on your page will that not hide everything including the progress bar?

Is it here somewhere the problem is maybe
 
Share this answer
 
Comments
J.Karthick 29-Jan-12 10:53am    
yes...i have update my question now...

Actually i just hide my button only by passing button object in my OnUpload() funtion...
 
Share this answer
 
Comments
J.Karthick 29-Jan-12 10:53am    
Thanks for your link....i'll check it out

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900