Jquery FormData可以附加数组上传到网络核心吗？答案

【问题标题】：Jquery FormData can append array to upload on net core?Jquery FormData可以附加数组上传到网络核心吗？
【发布时间】：2018-11-07 16:32:57
【问题描述】：

我编写了这段代码来使用 Jquery 上传文件

我准备了一个模型来映射这个 ajax 返回

$("input[name='ResolutionAttachedFile']")
            .each(function () {
                var ReadyToUpload = $(this)[0].files;
                if (ReadyToUpload.length > 0) {
                    $.each(ReadyToUpload, function (i, file) {
                        data.append("ResolutionAttachedFile", file);
                    });
                }
            });

        test.append('MyIFormFile', data);
        jQuery.ajax({
            url: '/Home/DocumentPage',
            data: test,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function (data) {
                alert(data);
            }
        });

这是我的控制器和数据模型

public class test
{ 
   public testArea MyIFormFile { get; set; }
   public class testArea
   {
       public List<IFormFile> ResolutionAttachedFile { get; set; }
   }
}

[HttpPost]
public IActionResult DocumentPage(test _test)
{
    return View();
}

但是这个模型不能映射值。

我不想改变模型结构。

那我该怎么做才能让它工作呢？

【问题讨论】：

您能否在发送请求之前在浏览器控制台中记录测试并分享结果
您还没有告诉我们data 或test 是什么或它们的声明位置。但是要绑定到该模型，您需要yourFormData.append('MyIFormFile.ResolutionAttachedFile[0]', someValue)（即完全限定名称）

标签： javascript jquery asp.net asp.net-mvc asp.net-core

【解决方案1】：

要绑定到MyIFormFile.ResolutionAttachedFile，您需要通过MyIFormFile.ResolutionAttachedFile。

用下面的ajax做一个测试：

    <div>
    <input type="file" multiple name="ResolutionAttachedFile" />
</div>

@section Scripts{
    <script type="text/javascript">
        $("input[name='ResolutionAttachedFile']")
            .change(function () {
                var data = new FormData();

                $("input[name='ResolutionAttachedFile']").each(function () {
                    var ReadyToUpload = $(this)[0].files;
                    if (ReadyToUpload.length > 0) {
                        $.each(ReadyToUpload, function (i, file) {
                            data.append("MyIFormFile.ResolutionAttachedFile", file);
                        });
                    }
                });
                jQuery.ajax({
                    url: '/DocumentPage',
                    data: data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    success: function (data) {
                        alert(data);
                    }
                });

            });

    </script>
}

注意

作为我的测试，当项目在netcoreapp2.1下时会失败，当testArea中没有额外的属性时会绑定失败。它仅在有 Name 之类的附加属性并从 ajax 设置名称值时才有效。

为了解决这个问题，您可以将您的项目迁移到netcoreapp2.2。

这是我的工作.csproj

  <Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>
  <TargetFramework>netcoreapp2.2</TargetFramework>
  <UserSecretsId>aspnet-IdentityCore-85ED30A8-40E9-4BD5-A9D2-EAF6BCF0D5F1</UserSecretsId>
</PropertyGroup>

<ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.App" />
  <PackageReference Include="Microsoft.AspNetCore.Razor.Design" Version="2.2.0-preview3-35497" PrivateAssets="All" />
  <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.1.5" PrivateAssets="All" />
</ItemGroup>

</Project>

【讨论】：