使用jquery ajax在同一个POST请求中上传文件和JSON数据？

Question

我正在尝试使用jQuery Ajax发送POST请求,我想在其中上传文件和一些json数据.请找代码,

var logoImg = $('input[name="logoImg"]').get(0).files[0];
var formData = new FormData();
formData.append('logo', logoImg);

var objArr = [];
objArr.push({
  "id": id,
  "name": userName
});

var obj = [{
  "objArr": objArr,
  "formData": formData
}];

$.ajax({
  type: "POST",
  url: url,
  dataType: "json",
  data: JSON.stringify(obj),
  contentType: "application/json",
  cache: false,
  async: false,
  complete: function(data) {
    alert("success");
  }
});

但我得到Internal server error: 500了后端API没有被调用.

请帮我在同一个AJAX请求中发送文件和数组obj.提前致谢

Answer 1

您无法序列化您在请求中发送的任何二进制数据.

要使用该FormData对象发送其他信息,只需使用该append()方法添加它,类似于您对图像本身的处理方式:

var logoImg = $('input[name="logoImg"]').get(0).files[0];
var formData = new FormData();
formData.append('logo', logoImg);
formData.append('id', id);
formData.append('name', userName);

$.ajax({
  type: "POST",
  url: url,
  data: formData,
  contentType: false,
  processData: false,
  cache: false,
  complete: function(data) {
    alert("success");
  }
});

请注意,在选择的重要组成部分被设置contentType并processData以false和删除async: false,这样的要求是异步发生.

最后,请注意,如果要在请求中发送的输入全部包含在同一表单中,则可以使用FormData构造函数将代码简化为:

var formData = new FormData($('#yourForm')[0]);