title: php & jquery upload image and preview display instantly
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>jquery:</p>
  
  <pre><code>$(document).ready(function() {
    $("#uploadimage").change(function() {
        var imagesrc = $("#uploadimage").val();
        $.post("/script/ajax_uploadimage.php", $("#formuploadimage").serialize(),
        function(data){
          //do something here
        },"json");
    });
  });
  </code></pre>
  
  <p>html form:</p>
  
  <pre><code>&lt;form name="formuploadimage" enctype="multipart/form-data" action="/upload.php" method="POST"&gt;
      &lt;table&gt; 
          &lt;tr&gt;&lt;td&gt;Image: &lt;/td&gt;&lt;td&gt;&lt;div id="imagepreview"&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; 
          &lt;tr&gt;&lt;td&gt;Upload a photo: &lt;/td&gt;&lt;td&gt;&lt;input type="file" name="uploadimage" id="uploadimage" /&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt; 
  &lt;/form&gt;
  </code></pre>
  
  <p>i've seen what  Uploadify can do but i would like to create one on my own.</p>
  
  <p>regards</p>