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请求表格数据属性＆＃34;图像＆＃34;缺少，但在发布带有数据的对象之前是正确的。

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请求中的不完整表单数据

1 个答案: