Upload image with jquery and display results

Question

I know this is a typical question but i've tried alot of things and haven't got it to work yet. I have a form where i want to upload an image, and as i've come to understand jquery natively doesent support imageupload in form submits. So we begin with the html i have:

<form action="uploadImage.php" method="post" enctype="multipart/form-data" id="image_form" name="image_form">                                                                                                           

<input type="file" name="addImage"  />                                                      

<input type="submit" name="submit" value="submit" />    

                                    </form> 
<div id="results">
</div>

And then we have the javascript:

$(document).ready(function() {

                                        $('#image_form').submit(function() { // catch the form's submit event
                                            $.ajax({ // create an AJAX call...
                                                data: $(this).serialize(), // get the form data
                                                type: $(this).attr('method'), // GET or POST
                                                url: $(this).attr('action'), // the file to call
                                                success: function(response) { // on success..
                                                    $('#results').load('Images.php'); // update the DIV
                                                }
                                            });
                                            return false; // cancel original event to prevent form submitting
                                        });
                                        });

Something tells me i need an implentation of http://malsup.com/jquery/ but i don't really understand how. And my php script for image upload works fine and is great, so it would be cool if I just could use the forms action but submit it with jquery.

Best regards

Answer 1

I suggest you to use some plugin like uploadify.

Answer 2

You can't serialize file inputs. To upload something asynchronously and make it work in all browsers, you need to use the hidden iframe trick. I'd recommend finding a jQuery plugin for that. Here is one you can try.