title: Send post request for image uploading via JavaScript
body: <p>I have an HTML form that I am trying to upload an image through.</p>
  
  <pre><code>&lt;form id="imageform" method="post" enctype="multipart/form-data" action='upload.php'&gt;
      Upload image &lt;input type="file" name="file" id="file" /&gt;
  &lt;/form&gt;
  
  &lt;div id='preview'&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to use JavaScript to upload run <code>upload.php</code>, so the page does not have to refresh. I then want to display the output in <code>#preview</code>.</p>
  
  <pre><code>$(document).ready(function() { 
      $('#file').live('change', function() {
          $("#preview").html('');
          $("#preview").html('Uploading...');
          $.post("upload.php",$("#imageform").serialize(), function(data){
              $("#preview").html(data);
          });
      });
  }); 
  </code></pre>
  
  <p>However, I get many errors like these within the div. I know that the data isn't being sent through, but how can I fix it?</p>
  
  <pre><code>Notice: Undefined index: file in /path/upload.php on line 14
  </code></pre>
  
  <p>I've searched through things on Google, but I have been receiving the same issue.</p>