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

Posted 2023-05-09

【中文标题】表单数据仅附加最后的多项选择

【英文标题】：Form-data only append last multiple selection

【发布时间】：2020-11-11 08:26:52

【问题描述】：

这可能是重复的，但我无法解决。 我可以通过 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 保存两次！！我快到了，但仍然无法管理它。

.

【参考方案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,
    );
);

【讨论】：

我更改为formData.append('inputFile[]', file)，没有任何变化，最后的选择仍然发送到服务器，但控制台日志发生了变化，现在我有两行：inputFile[], [object File] 6 和inputFile[], [object File] 3。但是仍然上传了 1,2,3 张图片。另一点更改为 data: formData 和 var formData = new FormData(); 导致错误 XML Parsing Error: no root element found 。请阅读更新。

也许我误解了这个问题。如果您选择图像 1、2、3 并提交它们应该被上传。然后，如果您选择图像 4,5,6... 您是要再次上传 1,2,3 还是只想要 4,5,6？起初我的印象是你想要全部 6 个。但在你更新之后我不太确定。 “结果：假设我首先选择图像 1、2、3，然后选择图像 4、5、6。我有图像 1、2、3 和再次保存在服务器上的 1、2、3、4、5、6 ！！我快到了，但仍然无法控制它。”看起来你不想要 1,2, 3。

我找到了更多关于您遇到的错误的信息。我在chrome中测试并没有收到错误。我认为它只是 Firefox - ovinitech.blogspot.com/2019/01/…

感谢您的回复。可能是我英语不好……无论如何，我需要将所有 6 张图片放在一起……但我希望用户能够从不同的文件夹中添加它们，这样用户可能不会一次选择它们，而是需要全部上传。但我最后选择了两次图像。更新已编辑。

我认为 4,5,6 两次是因为您在输入更改时将它们保存在 file[] 中。我在测试时遇到了同样的问题。这就是为什么我把它切换到var formData = new FormData()。您是否尝试在 Chrome 或 Edge 中查看是否仍然收到 XML Parsing Error？