表单数据仅附加最后的多项选择

Question

这可能是重复的，但我无法解决。 我可以通过 JQuery/Ajax 将多个图像发送到我的服务器（Asp.Net Core）并成功保存它们。但问题是当我想添加第二批文件时，第一批不会追加到表单数据。我使用按钮而不是通过输入 type="file" 字段添加图像。

HTML：

<form asp-area="User" asp-controller="Item" asp-action="Create" id="createForm" method="post" enctype="multipart/form-data" >
    <input asp-for="ImageUrl" id="myInput" type="file" name="inputFile[]" accept="image/*" multiple style="display:none" />
    <button id="myButton" type="button">+ Add Files</button>

JS：

$(document).ready(function () {
  var inputFile = $('#myInput');
  $('#myButton').click(function () {
     $('#myInput').click();
  });                
  var files = [];
  $('#myInput').change(function () {
     var newFiles = [];
     for (var index = 0; index < inputFile[0].files.length; index++)                                         
       {
          let file = inputFile[0].files[index];
          files.push(file);
       }    
     });
  });            

  $("#createForm").submit(function (e) {
      e.preventDefault();
      var formData = new FormData(document.getElementById('createForm'));
      //var formData = new FormData(this);
      files.forEach(file => {
          formData.append('file[]', file);
      });
      for (var pair of formData.entries()) {
          console.log(pair[0] + ', ' + pair[1]);
      }

      $.ajax({
          type: "POST",
          cache: false,
          processData: false,
          contentType: false,
          url: $("#createForm").attr('action'),
          enctype: 'multipart/form-data',
          data: new FormData(this),
      });
  });  

});

假设我选择图片 1,2,3 并提交我的表单，所有 3 张图片都成功保存到服务器端。现在让我们尝试一个新记录：我添加图片 1、2、3，然后选择图片 4、5、6，因此我希望将 6 个图像附加到表单数据中。但只有最后一个选择 4,5,6 被保存到服务器！

这是我在下面的控制台报告。如您所见，我有input-File[]=3！像我没有 jquery 和 ajax，只使用纯 HTML/Input Multiple file 之类的东西，我只能上传我最后的选择！！

但是当我刷新页面并仅选择 1、2、3 张图像（仅选择一个）时，我有 input-File[]=3 和 file[], [object File]=3 并且一切都很好。

我尝试了data: new FormData() 和data: formData 以及许多其他关于数据参数的选项，但没有人能解决我的问题:(

更新：******************************：

Case 1: 
 var formData = new FormData(document.getElementById('createForm'));
 .   .   .
 data: formData,

结果：服务器中没有图像保存，数据库中的 ImageUrl 为空。

 Case 2:
 var formData = new FormData()
 .   .   .  
 data: formData,

导致控制台出错：XML Parsing Error: no root element found

 Case 3:
 var formData = new FormData(this)
 .   .   .
 data: formData,

Results：假设我先选择图像 1、2、3，然后选择图像 4、5、6。我有图像 1,2,3,4,5,6 保存在服务器上，4,5,6 保存两次！！我快到了，但仍然无法管理它。

.

Answer 1

我认为您复制代码的方式可能存在错误。在$('#myInput').change(function () { ... }); 之后有一个额外的}); 我假设这不是问题的一部分，只是粘贴时的错误。

我认为的问题是您试图将文件与 inputFiles 分开发送。更新提交事件处理程序中的 for 循环应该可以满足您的需求。

$("#createForm").submit(function (e) {
    e.preventDefault();
    var formData = new FormData();
    files.forEach((file) => {
        formData.append('inputFile[]', file);
    });

    for (var pair of formData.entries()) {
        console.log(pair[0] + ', ' + pair[1]);
    }

    $.ajax({
        type: "POST",
        cache: false,
        processData: false,
        contentType: false,
        url: $("#createForm").attr('action'),
        enctype: 'multipart/form-data',
        data: formData,
    });
});