php & jquery upload image and preview display instantly

Question

hi,

im looking forward to create an upload module where user can browse, click open and it will instantly display a preview of that image without having to click a submit button so that user can continue to key in other information.

i've done a simple but incomplete jquery below which basically capture the image name. but my question is how do i post the upload image to the php script since there is there is no submit button for POST? i cant capture $_FILES array values.

jquery:

$(document).ready(function() {
  $("#uploadimage").change(function() {
      var imagesrc = $("#uploadimage").val();
      $.post("/script/ajax_uploadimage.php", $("#formuploadimage").serialize(),
      function(data){
        //do something here
      },"json");
  });
});

html form:

<form name="formuploadimage" enctype="multipart/form-data" action="/upload.php" method="POST">
    <table> 
        <tr><td>Image: </td><td><div id="imagepreview"></div></td></tr> 
        <tr><td>Upload a photo: </td><td><input type="file" name="uploadimage" id="uploadimage" /></td></tr>
    </table> 
</form>

i've seen what Uploadify can do but i would like to create one on my own.

regards

Answer 1

You can post image only by posting form, so you must use iframe to upload image without reloading main page. When iframe reloads, add some script in its response which triggers callback function in main page to display just uploaded image.

Answer 2

Files cannot be uploaded using pure AJAX. You may want to checkout the Form Plugin which does support file uploads: http://jquery.malsup.com/form/ and integrate it into your solution. There you have few good examples using ajaxSubmit.

Answer 3

I saw an article with a jQuery solution for this recently:

Zurb Playground : "Image Uploads with 100% Less Suck. Guaranteed."

I would rewrite it here, but have not as it would be redundant.

Answer 4

You might like to try this tutorial:

http://www.finalwebsites.com/forums/topic/php-ajax-upload-example

which should help you do exactly what you are asking.