finally, an upload form with progress bar

17 April 2008

My job sometimes makes me deal with some geek things such as php scripts. Thank God there are many people out there generously share their scripts they've made for free. I can find them on some websites like hotscripts.com.
Few years ago I had to make an upload form for my office's website. It's a form to send files from a user's computer to the webserver over the Internet. When I found one that fitted my need, what I did was just copy-pasting the script, modifying it a little, then put it on the website. At that time I considered it's enough as it could be fully functional.
But after few months, I was thinking that it would be better if I could have an image or a message saying that the file's being uploaded when the user clicked the submit button, so they didn't just stare at a still page for minutes wondering what's going on. At first, I didn't easily find the way as my search on the web came up for nothing. Until then I found out on a php forum that a javascript event function for the submit button in my existing php upload script could make it happen. And it's so simple that I can share it here.
What you should do was just put this in the head section:

<script language="JavaScript">
<!--
function showProgress() {
document.getElementById("progress").style.visibility = 'visible';
document.getElementById("submit").disabled = true;
}
//-->
</script>
Then insert an onClick attribute in the submit button to call the show progress event function:
<input
type=
"submit" name="submit" value="Upload"
onclick="javascript:showProgress();
">
And put a <span> tag to group an inline-elements like images and/or messages next to the submit button:
<span id="progress" style="visibility:hidden"><img src="http://mysite/images/wait.gif"/></span>
That's it.
But you know what. That was then before I found a program called Uber Uploader which allows me to have a progress bar for my upload form. It's more informative than just a please-wait sign. And it's really a great program. I know nothing about perl, but it was just giving me an easy way to install and edit to customize my needs. I usually can't get enough with something. But I think I'll stick with it for a while.

1 comments:

Anonymous said...

O, jadi tanpa melakukan ritual "safely remove" ternyata sah-sah dan aman2 saja, to asal seperti yang dikatakan P.Bahrun.
Thx banget ilmunya,....
tips n trik blog