Calculate progress bar percentage

Question

I am building a file upload progress bar. Currently I have an upload form which returns the current amount of uploaded data. So, it starts at zero, and returns the current size in bits, but I have converted that to bytes.

If I can get the total file size before I upload, and can get the current amount uploaded, and return this dynamically, how could I calculate this so that I can use a 1-100% value for a css width?

I am using the swfupload jquery plugin: http://blogs.bigfish.tv/adam/2009/06/14/swfupload-jquery-plugin

Solution 1

Percents uploaded=100/file size*bytes uploaded

remember to use the same units for both sizes.

Regards

Solution 2

Say your CSS maximum width for the progress bar (DIV?) is 770px. Call this PROGRESS_MAX.

If the file size in bytes is FILE_SIZE, and the number of bytes uploaded is UPLOADED_BYTES then the current progress value (width in px) is UPLOADED_BYTES / FILE_SIZE * PROGRESS_MAX

Hope that's what you're looking for.

Comments

[Bernhard Hofmann]

Can the progress bar have it's maximum set? If so, you can simply set the bar maximum to the file size in byte, and the current progress is the number of bytes transferred. Most progress bars allow this.

[Nic Hubbard]

Yes, I can set a max. But, because these values are in bytes or bits, I am not sure how to translate that to something that could actually use useful for a progress bar value. E.g. css width value.

[Nic Hubbard]

Totally understand. Thank you!