Need help with creating image upload form

Question

Hi, I'm not really gr8 with ajax and javascript so I ask for help. Here is the deal, I have the image form upload working the old fashion way:

<form action="db/photo/do_upload" method="post" enctype="multipart/form-data">  <fieldset id="upload_form">
        <input type="file" name="userfile" size="20" />

    </fieldset>
  <button type="button" class="ui-state-default">Upload</button>
    </form>

What I want is to make web page more attractive by making this with ajax, how can I do this :

Once the Upload button is clicked - Start uploading the image - Then while the image is uploading display some kind of ajax-loader - When image is done uploading print out something like thank you

I have a php part already implemented-working I just need some help with this. Thank you

Answer 1

Try using redy to go and fancy solution

+edit+

Lightweight and not so fancy

Answer 2

The basic problem is that you can't directly do a file upload via XMLHTTPRequest (i.e., "ajax"). You have to post a form.

Now, what you could do is something like this:

• Direct the form "target" to an iframe hidden on the page (just declare an iframe, give it an "id" and a "name" because I'm never sure which one "target" refers to :-) and keep it "display: none")
• In the form "submit", update something on the page to start a throbber (just reveal a simple animated GIF, or something more fancy if you like)
• Have the server send back to a response (which, remember, will end up in our hidden iframe) that's a dummy page with a little javascript in it to tell the parent page that it's time to hide/stop the animation.

Not fancy, and you can't make the animation depend on the file size, but it's simple.

Answer 3

What you can do is use Javascript to catch the 'action' before you get sent to the next page, and thereafter, use JS to submit the form.

For example (using jQuery),

 $('button').click(
    function() {
        $('form').submit();
        $('div.result').html('<p>Thanks a bunch!</p>');
        return false;
    }
 );

Changing a 'loading picture' to "Thanks!" would require some kind of signal from the server. I just started using AJAX, so perhaps someone more familiar with such functions could add to this? Cheers. :)