Page 1 of 1

display an image while uploading

Posted: Fri Jan 26, 2007 3:32 am
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?

Re: display an image while uploading

Posted: Fri Jan 26, 2007 4:55 am
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.

Posted: Fri Jan 26, 2007 5:52 am
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).

Posted: Fri Jan 26, 2007 7:10 am
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

Posted: Fri Jan 26, 2007 7:56 am
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.

Posted: Fri Jan 26, 2007 8:58 am
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

Posted: Fri Jan 26, 2007 10:52 am
by Kieran Huggins
Make your own ajax spinners:

http://www.ajaxload.info/