title: How to send multipart/form-data form content by ajax (no jquery)?
body: <p>I am trying to send some form without reloading the page and I am trying to understand the under-the-hood details therefore not using any JavaScript library:</p>
  
  <pre><code>var http = createRequestObject();
  function createRequestObject() {
      var objAjax;
      if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
          objAjax=new XMLHttpRequest();
      }
      else
      {// code for IE6, IE5
          objAjax=new ActiveXObject("Microsoft.XMLHTTP");
      }
      return objAjax;
  }
  
  function display_progress() { ... }    
  
  function upload_file() {
      var request = 'UploaderServlet';
      http.open('post', request);
      http.onreadystatechange = display_progress;
      http.send(null); // HERE PROBABLY THE DATA SHOULD BE SENT
  }
  
  &lt;form enctype="multipart/form-data" id="upload_form" name="upload_form" method="POST" action="UploaderServlet" onsubmit="upload_file(); return false;" target="upload_target"&gt;
  Choose a file &lt;br /&gt;  
  &lt;input name="file" size="27" type="file" id="file" /&gt; &lt;br/&gt; 
  &lt;input type="submit" name="uploadSubmitButton" value="Upload" /&gt;&lt;br /&gt; 
  &lt;br /&gt;  
  &lt;/form&gt; 
  
  &lt;iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>The upload_file() is called, but if I get it right, the data is not sent. Please advice regarding the correct way to send the data.</p>