ASP.NET Core中AJAX提交含文件的多属性对象失败问题排查

要解决文件无法提交到ASP.NET Core控制器的问题，核心是正确使用FormData处理文件上传，并配置AJAX的必要参数。以下是具体修正步骤：

1. 修正表单标记 #

为表单添加enctype="multipart/form-data"属性，明确告知服务器这是包含文件的表单提交：

<form id="wizard" autocomplete="false" enctype="multipart/form-data">
    @Html.AntiForgeryToken()                       
    <!-- 其余表单内容保持不变 -->
</form>

2. 重写AJAX提交逻辑 #

替换原有的serializeArray方式，改用FormData对象处理表单数据和文件，同时启用文件上传必需的AJAX配置：

$('input.submit').on('click', function() {
    // 从表单初始化FormData，自动包含普通表单字段和防伪令牌
    var formData = new FormData($('#wizard')[0]);

    // 获取Kendo Upload中选中的文件
    var upload = $("#files").data("kendoUpload");
    var files = upload.getFiles();
    
    // 将每个文件的原生File对象追加到FormData中
    files.forEach(function(file) {
        formData.append("Files", file.rawFile);
    });

    $.ajax({
        type: 'POST',
        cache: false,         
        contentType: false, // 禁止jQuery自动设置Content-Type，让浏览器自动处理multipart/form-data
        processData: false, // 禁止jQuery转换FormData为字符串，保持原生格式
        data: formData,
        url: '/Home/Create',
        success: function (result) {        
            if (result.success) {        
                // 处理成功逻辑
            } else {
                console.log(result.message);
            }    
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr.responseText);
            console.log(thrownError);
        }
    });
});

关键修正点说明 #

• 使用FormData：serializeArray无法处理文件类型，必须用FormData来封装包含文件的表单数据。
• 追加原生File对象：Kendo Upload的getFiles()返回的是组件封装的文件对象，需通过rawFile属性获取浏览器原生的File对象才能被服务器识别。
• 启用AJAX参数：
  • contentType: false：让浏览器自动设置正确的multipart/form-data请求头，包含边界标识。
  • processData: false：阻止jQuery将FormData转换为URL编码字符串，保持文件的二进制格式。
  • cache: false：避免浏览器缓存文件上传请求。

控制器代码无需修改 #

原控制器的Create方法已经正确接收InquiryViewModel，修正前端提交逻辑后，model.Files将自动绑定上传的文件集合。

内容的提问来源于stack exchange，提问作者Victor_Tlepshev