title: Ajax Upload image
body: <p>Q.1 I would like to convert this form to ajax but it seems like my ajax code lacks something. 
  On submit doesn't do anything at all.</p>
  
  <p>Q2. I also want the function to fire on change when the file has been selected not to wait for a submit.</p>
  
  <p>Here is JS.</p>
  
  <pre><code>$('#imageUploadForm').on('submit',(function(e) {
      e.preventDefault()
      $.ajax({
          type:'POST',
          url: $(this).attr('action'),
          data:$(this).serialize(),
          cache:false
      });
  }));
  </code></pre>
  
  <p>and the HTMl with php.</p>
  
  <pre><code>&lt;form name="photo" id="imageUploadForm" enctype="multipart/form-data" action="&lt;?php echo $_SERVER["PHP_SELF"];?&gt;" method="post"&gt;
      &lt;input type="file" style="widows:0; height:0" id="ImageBrowse" hidden="hidden" name="image" size="30"/&gt;
      &lt;input type="submit" name="upload" value="Upload" /&gt;
      &lt;img width="100" style="border:#000; z-index:1;position: relative; border-width:2px; float:left" height="100px" src="&lt;?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?&gt;" id="thumbnail"/&gt;
  &lt;/form&gt;
  </code></pre>