Question

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.