display an image while uploading

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
ryuuka
Forum Contributor
Posts: 128
Joined: Tue Sep 05, 2006 8:18 am
Location: the netherlands

display an image while uploading

Post by ryuuka »

i have decided recently that making or getting a good upload progress bar
was too much of a hassle so i wanted to throw that idea in the bin

now i just want the file to upload but i still want a indicator that tells
the user that a file is being uploaded.

so my question is this:
how do i display an image when i click submit and remove the image when the file is done uploading?

any good javascript and/or php functions for this?
Mohamed
Forum Newbie
Posts: 21
Joined: Fri Jan 19, 2007 6:59 pm
Location: Seattle

Re: display an image while uploading

Post by Mohamed »

ryuuka wrote: so my question is this:
how do i display an image when i click submit and remove the image when the file is done uploading?

any good javascript and/or php functions for this?
If I understood you well, I think that is impossible. because you can't display something that you are uploading.

My two cents.
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

It'll need Javascript, but it could be rewritten to use JS if the user has it and to use a normal submit button if they don't.

Code: Select all

<script>
function displayThenUpload() {
    var myImage = getElementById('progressbar');
    myImage.style.display = 'block';
    document.myForm.submit();
}
</script>

<img id="progressbar" src="progressbar.gif" style="display: none;">
<form name="myForm">
Upload: <input type="file" name="myUpload">
<input type="button" value="Submit" onClick="displayThenUpload()">
Your form is being sumitted, so removing the image isn't necessary because they'll be loading a new page (or reloading the same page if you're submitting the page to itself).
ryuuka
Forum Contributor
Posts: 128
Joined: Tue Sep 05, 2006 8:18 am
Location: the netherlands

Post by ryuuka »

thanks for the info but i see i formulated my question in the wrong way

when i upload a file (zip) and it's like 200mb in size it will take a while
to upload so when i clcik the submit button i want to display an image like this one:

Image

and i want it to dissapear when the upload is finished
this is so that the users know their file is being uploaded

hope this clarifies it a bit
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

That's exactly what the code I posted does. Like I said, you don't need to worry about removing the image because you're submitting a form which means you'll be refreshing the page somehow.
ryuuka
Forum Contributor
Posts: 128
Joined: Tue Sep 05, 2006 8:18 am
Location: the netherlands

Post by ryuuka »

k

misinterpeted your source and used a different one but it does exactly the same

function at the start of the page:

Code: Select all

<script language="JavaScript">
<!--
function showProgress() {
document.getElementById("progress").style.visibility = 'visible';
document.getElementById("submit").disabled = true;
}
//-->
</script>
implementation of the function at the submit button:

Code: Select all

<input type=submit value=upload onclick="javascript:showProgress();">
<span id="progress" style="visibility:hidden"><img src="indicator_square.gif"/>

thanks for your advice it helped
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

Make your own ajax spinners:

http://www.ajaxload.info/
Post Reply