아약스 요청의 양식 데이터가 불완전합니다

Question

이 상황에 머물러 있습니다 :
아약스를 사용하여 여러 입력란과 이미지를 업로드합니다. 이미지는 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); 
}); 

문제 :없는 아약스 요청 양식 데이터 속성 "이미지"에,하지만 데이터가 올바른지와 객체를 게시하기 전에.

아마도 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); 
    }); 
}