loading image once file submit clicked

Question

I allow registered users to submit an image to the server. Problem here is, if image's size is too large or if user's internet connection is slow (many people still use dial up here) it take a while before its submitted. And some users keep clicking submit button while the image is in loading process. At one website, I saw that once user click on file submit, form disappears and loading image appears. How can I do that with jquery?

<form method="POST" ENCtype="multipart/form-data" action="imageupload.asp?Process=Add"> 
<p align="center"><b>--- Upload Image ---</b><br> 
<input type="FILE" size="23" name="FILE"> 
<input type=submit value="Upload"> 
</p> 
</form>

Answer 1

I'd say take a look at uploadify, it have features that should make your life easier

Taken from their example code:

<input id="fileInput" name="fileInput" type="file" />
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('#fileInput').uploadify({
'uploader'  : 'uploadify.swf',
'script'    : 'uploadify.php',
'cancelImg' : 'cancel.png',
'auto'      : true,
'folder'    : '/uploads'
});
});
// ]]></script>

The demo explains pretty well what it's doing.

Answer 2

This should do something similar - when the user clicks the upload button the entire upload form is hidden (file input and the button) and instead a waiting image is shown in its place. Of course there's plenty more you could do here - a modal dialog with "Please Wait" message, you could just disable the upload button so users can't click it while the upload is in progress etc.

<form method="POST" ENCtype="multipart/form-data" action="imageupload.asp?Process=Add" id="uploadForm"> 
    <p align="center" id='uploadPanel'>
        <b>--- Upload Image ---</b><br> 
        <input type="FILE" size="23" name="FILE"> 
        <input type=submit value="Upload"> 
    </p>
    <p style='display:none' id='waitPanel'>
        <img src='wait.gif' title='Please Wait' />
    </p>
</form>

<script type='text/javascript'>
    $(document).ready(function() {
        $("#uploadForm").submit(function() {
            $("#uploadPanel").toggle();
            $("#waitPanel").toggle();
        });
    });
</script>

Answer 3

$('#imageform').submit(function () {
     $('#loader').show();
     $(this).hide();
});

What this does is:

1. Find the form with id=imageform. (You can make yours like this)
2. Show a loader. You have it preloaded before with style="display: none;" to keep it hidden until necessary.
3. You hide the form so the user doesn't click the submit button again. Disabling the button is another option.

Answer 4

just add a submit event handler to the form

eg. something like this

$('form').submit(function(){
  $(this).hide();
  $('#loadingimage').show();
});

where loadingimage is an element with the ID loadingimage and is by default hidden.