HTML 表单文档上传时 Ajax 调用返回 500 错误的解决方案

javascript

2024-03-18 08:24:41

HTML 表单中文档上传的解决方案

问题

在 HTML 表单中使用表单上传文档时，你可能会遇到 Ajax 调用无法触发控制器方法的问题，并显示错误代码 500。

解决方案

为了解决此问题，需要对表单提交方式、Ajax 请求格式和控制器方法参数进行修改。

表单提交

避免在另一个表单中嵌套表单来上传文档。使用 FormData 对象将文件和表单数据收集到一起。

Ajax 请求格式

Ajax 请求的 data 属性应为 FormData 对象。此外，还需设置 contentType 和 processData 属性为 false。

控制器方法参数

控制器方法应采用与 DocumentViewModel 相同类型或类似类型的参数。

修改后的代码

以下是如何修改代码以解决此问题：

jQuery 方法：

$('body').on('click', '#UploadDoc', function (e) {
    e.preventDefault();
    debugger;

    var btnCaption = $(this).text();
    if (btnCaption == "Upload") {

        $('#FileName').rules("add", {
            required: true,
            messages: {
                required: "Please choose document to upload.",

            }
        });
    } else {

        $("#FileName").rules("remove");
    }

    var fileData = $("#documentViewModel_FileName").prop('files')[0];
    var formData = new FormData();
    formData.append('file', fileData);
    formData.append('DocumentName', $("#documentViewModel_DocumentName").val());
    formData.append('DocumentType', $("#documentViewModel_DocumentType").val());
    formData.append('UploadedBy', $("#documentViewModel_DocumentType").val());

    $.ajax({
        url: "/Controller/SaveDoc",
        type: "POST",
        contentType: false,
        processData: false,
        beforeSend: function () {
            $(".page-loader").css("display", "block");
        },
        data: formData,
        success: function () {
            console.log('success data file');
        },
        error: function (jqXHR, textStatus, errorThrown) {
            if (jqXHR.status == 400) {
                LogoutForSessionExpiration();
            } else {
                $(".page-loader").css("display", "none");
                toastr.error("Error Occurred");
            }
        }
    });
});

控制器方法：

[HttpPost]
public JsonResult SaveDoc([FromForm] DocumentViewModel DocumentViewModel)
{
    JsonResponse jsonResponse;
    bool result;
    try
    {
        ...
    }
    catch (Exception ex)
    {
        ...
    }
}

结论

通过实现这些修改，你应该能够解决 Ajax 调用中遇到的错误 500，并成功在 HTML 表单中上传文档。

常见问题解答