title: Incomplete Form Data in ajax request
body: <p>Stucked in this situation:<br>
  I upload several inputs fields and images using ajax. Images are encoded to base64 string with FileReader api.
  Everything seems to work except sending encoded images.</p>
  
  <p>My code (simplified):</p>
  
  <pre><code>var groups = {},
      objects = {};
  objects["name"] = {},
  objects["group"] = {};
  objects["image"] = {};
  
  var objectCount = $(".layout-object").length;
  $(".layout-object").each(function(i,v) {
     var k = objectCount-i;
     objects["name"][i] = $(v).val();
     objects["group"][i] = $("#set-object-dropdown-"+k).val();
  
     // get an image
     var file = document.getElementById('image-'+k).files[0];
  
     var reader = new FileReader();
     reader.onload = function(event) {  
        objects["image"][i] = event.target.result; // get image in base64
     };
     reader.readAsDataURL(file);
  });             
  
  $(".layout-group").each(function(i,v) {
      groups[i] = $(v).val();
  });
  
  // prepare object for ajax request...
  var data = {
      name: $("#name").val(),
      groups: groups,
      objects: objects
  };
  
  // console log shows all data correctly in place = in objects there is a propery "image"...
  console.log(data);
  
  // sending ajax POST request
  var posting = $.post( location.href, { data: data } );
  posting.done(function(response){
          console.log(response);
  });
  </code></pre>
  
  <p>Issue: in ajax request form data property "image" is missing, but before posting object with data is correct.</p>
  
  <p>Maybe is there a problem with <code>readAsDataURL</code> function and its <code>onload</code> event?</p>