我可以使用 FormData 对象通过 ajax 调用将包含图像的对象列表从视图发送到控制器吗？

Question

我有一个包含图像文件的表单列表，并使用jquery收集它们并尝试将它们发送到控制器，我尝试发送一个包含图像的表单，并且工作正常，但是当我发送列表时，不工作

Answer 1

是的，您可以通过

FormData

调用，使用视图中的

controller

对象将包括图像在内的对象列表发送到

AJAX

。

为此，您可以创建

FormData

对象的新实例，将列表中的每个表单附加到

FormData

对象，然后通过

FormData

调用将

AJAX

对象发送到

controller

.

这是一个演示如何执行此操作的示例：

// Create a new instance of the FormData object
var formData = new FormData();

// Iterate over each form in the list
$('form').each(function() {

  // Append the form data to the FormData object
  var form = $(this)[0];
  var formdata = new FormData(form);
  
  formData.append('forms[]', formdata);
});

// Send the FormData object through an AJAX call to the controller
$.ajax({
  url: 'your_controller_url',
  type: 'POST',
  data: formData,
  contentType: false,
  processData: false,
  success: function(response) {
    // Handle the response from the controller
  },
  error: function(error) {
    // Handle any errors that occur during the AJAX call
  }
});

Answer 2

您可以按照以下示例制作：

const formData = new FormData();

formData.append('email',this.formObj.email);

    for (let i = 0; i < this.formObj.Attachments.length; i++) {

    formData.append(`files[${i}].property1`, 
        this.formObj.Attachments[i].property1);

    formData.append(`files[${i}].property2`, 
        this.formObj.Attachments[i].property2);

    formData.append(`files[${i}].file`, 
        this.formObj.Attachments[i].file, 
        this.formObj.Attachments[i].file.name);
}