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:
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/