jquery - ajax 使用包含数据和文件的 FormData 提交表单

Question

我试图提交一个包含数据和文件的表单

$('form').submit(function(event) {
  var formData = $('form').serializeArray();
  formData.push({
    name: "logo",
    value: $("#wizard-picture")[0].files[0]
  });
  formData.push({
    name: "prologo",
    value: $("#wizard-picturep")[0].files[0]
  });
  for (var i = 0; i < list.length; i++) {
    formData.push({
      name: "Keys",
      value: list[i]
    });
  }
  console.log(formData);
  $.ajax({
    url: '/Company/Steps/',
    method: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(data) {
      debugger;
      alert("succses");
    },
    error: function(xhr, ajaxOptions, thrownError) {
      debugger;
      console.log(xhr);
      console.log(ajaxOptions);
      console.log(thrownError);

      alert(xhr.status);
      alert(thrownError);
    }
  });
});

formData 在控制台中正确显示了所有数据。但在我的控制器上它是空的！

标签： jqueryasp.net-ajaxmultipartform-data

Answer 1

要在请求中发送文件数据，您需要使用FormData对象，而不是序列化数组。

因此，您可以向form的构造函数提供对元素的引用FormData，如下所示：

$('form').submit(function(e) {
  e.preventDefault();
  var formData = new FormData($('form').get());

  $.ajax({
    url: '/Company/Steps/',
    method: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(data) {
      debugger;
      alert("succses");
    },
    error: function(xhr, ajaxOptions, thrownError) {
      debugger;
      console.log(xhr);
      console.log(ajaxOptions);
      console.log(thrownError);
    }
  });
});