jQuery FormData可以追加数组上传到网络核心吗?

时间:2018-11-07 16:32:57

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

我编写了这段代码以使用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();
}

但是此模型无法映射值。

我不想更改模型结构。

那我该如何让它工作呢?

1 个答案:

答案 0 :(得分:0)

要绑定到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>