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

ajax 请求中的表单数据不完整

Incomplete Form Data in ajax request

javascript

forms

ajax

jquery