Неполные данные формы в запросе ajax

Question

Спрятанная в этой ситуации:
Я загружаю несколько полей ввода и изображений с помощью ajax. Изображения кодируются в строку base64 с помощью FileReader api. Все, кажется, работает, кроме отправки зашифрованных изображений.

Мой код (упрощенно):

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 Форма запроса свойств данных «образ» отсутствует, но перед публикацией объекта с данными является правильным.

Возможно, есть проблема с функцией 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); 
    }); 
}