title: Suggestions to upload image using jQuery ajax
body: <p>I have a form that has 3 inputs:</p>
  
  <p>[1] text input field for a status update</p>
  
  <p>[2] file upload (for a picture)</p>
  
  <p>[3] text input field for attaching a link</p>
  
  <p>The user toggles between each one depending on what they want to do. For example when choosing [2], inputs [1] and [3] are hidden.</p>
  
  <p>All of these inputs are contained within a single form with id <code>posts_form</code>. Options [1] and [3] post via Ajax to different controllers.</p>
  
  <p>My problem now is with option [2] because it is not possible to upload images using jQuery ajax.</p>
  
  <p>Some solutions I've seen involve using the jQuery Form plugin, but I wonder if it would be possible to do image uploading without the use of a plugin.</p>
  
  <p>For example this would be the code base for uploading which of course doesn't work.</p>
  
  <pre><code>    $.ajax({
          url: 'chat/upload/' + &lt;?php echo $page_id; ?&gt;,
          type: 'POST',
          data: $('#posts_form').serialize(),
          dataType: 'html',
          beforeSend: function(){
                $('#loading').show();
              },          
          success: function(html) {
              $('#attach').replaceWith(html);
              $('#loading').hide();
              $('#posts_form input').val('');
              $('.posts_link').val('');
              $('#chat_input').hide();
              }
          });
  </code></pre>
  
  <p>Any suggestions on what could be added / changed to permit image upload using jQuery only, without plugins?</p>
  
  <p>Thanks.</p>