CODEWITHSUNDEEP
javascriptjquery
mrpatg
mrpatg

Reputation: 10117

Submit file upload/form on file selection

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.

Upvotes: 2

Views: 2978

Answers (2)

Myles
Myles

Reputation: 21510

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... :)

Upvotes: 1

John Boker
John Boker

Reputation: 83709

You could trap the submit event:

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

Upvotes: 4

Related Questions