title: How can I post an image that is uploaded using <input type="file" /> without using the form's submit button?
body: <p>This works fine as a normal form:</p>
  
  <pre><code>&lt;form id="frm1" enctype="multipart/form-data" action="form_handler_post.php" method="POST"&gt;
      &lt;input type="hidden" name="MAX_FILE_SIZE" value="300000" /&gt;     
      Send this file: &lt;input name="userfile" type="file" /&gt;
      &lt;input type="text" name="theRefNum" /&gt;
      &lt;input type="submit" value="Send File" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>...but I want to post the contents of the form (i.e. the image) using jQuery, since I have lots of other data that I want to post at the same time and don't want to include it in the same form as the image upload. E.g.</p>
  
  <pre><code>$.post("form_handler_post.php", { name: "John", time: "2pm", otherData: "Friday", image:#######});
  </code></pre>
  
  <p>I've tried <code>image:userfile</code>, <code>image:'userfile'</code> and <code>image:$('userfile').val()</code> but to no avail. </p>
  
  <p>How do I include the image file in the data section - i.e. how do I access the image's <code>value</code>?</p>