Ajax請求中的表單數據不完整

Question

卡在這種情況下：
我使用ajax上傳了幾個輸入字段和圖像。 使用FileReader API將圖像編碼為base64字符串。 除了發送編碼的圖像，一切似乎都可以正常工作。

我的代碼（簡體）：

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);
});

問題：在ajax請求表單中缺少數據屬性“ image”，但是在發布帶有數據的對象之前是正確的。

也許readAsDataURL函數及其onload事件存在問題？

Answer 1

像這樣：

reader.onload = function(event) {  
  objects["image"][i] = event.target.result; // get image in base64
  if (k == 1) //when the last object is iterated and it's image is set:
  {
     fireAjax();
  }

};

function fireAjax(){
    // sending ajax POST request
    var posting = $.post( location.href, { data: data } );
    posting.done(function(response){
            console.log(response);
    });
}