Submit file upload/form on file selection

Question

I'd like to take my form below, and somehow adjust it to submit the form when the user selects a file. How can I do that?

<div id=uploadform style="width:500px;margin-left:auto;margin-right:auto;">
    <form enctype="multipart/form-data" action='' method='POST'> 
        <input type="file" name="imagefile" class=browse>
        <input type='submit' value='Upload' class=uploadsubmit onClick="if($('#loading').css('display') == 'none') { $('#loading').show('fast'); $(this).hide('fast'); };">
        <input type='hidden' value='1' name='submitted' /> 
    </form> 
</div>
<div id=loading style="display:none;">
    <img src=uploading.gif>
</div>

Since the button will be absent(ideally), how can I still show my image loading layer after submit?

To clarify, I want the submit button itself gone, and when the user selects a file, submit the form and show the #loading layer.

Answer 1

You could trap the submit event:

$("#uploadform form").submit(function()
{
    $("#uploadform").hide();
    $("#loading").show();
});

Answer 2

You can use the onChange event handler for the file element, but that is known to have browser incompatibility issues, maybe jquery can handle that for you though. Then of course in the event handler you would submit the form and display your loading dialog. If you want to avoid a refresh of the page though, the form is going to have to be submitted in an IFrame, otherwise your loading dialog will not be displayed for very long... :)