title: Upload file with Ajax XMLHttpRequest
body: <p>I am trying to send file with XMLHttpRequest with this code.</p>
  <pre class="lang-js prettyprint-override"><code>var url= &quot;http://localhost:80/....&quot;;
  $(document).ready(function(){
      document.getElementById('upload').addEventListener('change', function(e) {
          var file = this.files[0];
          var xhr = new XMLHttpRequest();
          xhr.file = file; // not necessary if you create scopes like this
          xhr.addEventListener('progress', function(e) {
              var done = e.position || e.loaded, total = e.totalSize || e.total;
              console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
          }, false);
          if ( xhr.upload ) {
              xhr.upload.onprogress = function(e) {
                  var done = e.position || e.loaded, total = e.totalSize || e.total;
                  console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
              };
          }
          xhr.onreadystatechange = function(e) {
              if ( 4 == this.readyState ) {
                  console.log(['xhr upload complete', e]);
              }
          };
          xhr.open('post', url, true);
          xhr.setRequestHeader(&quot;Content-Type&quot;,&quot;multipart/form-data&quot;);
          xhr.send(file);
      }, false);
  });
  </code></pre>
  <p>I get this error: T</p>
  <blockquote>
  <p>The request was rejected because no multipart boundary was found.</p>
  </blockquote>
  <p>What am I doing wrong?</p>