Laravel项目中jQuery Ajax文件上传失败问题求助

我有一个Laravel应用，表单原本通过Ajax提交文本数据一切正常，但添加文件上传功能后，原代码彻底无法工作。

表单代码（Laravel组件） #

<form class="form-horizontal" action="@yield('content-form-action')" name="mfrm" id="mfrm" method="post" autocomplete="off" enctype="multipart/form-data">

原Ajax提交代码（仅支持文本数据） #

function saveData() {
    var applicationId = $('#applicationId').val();
    var jobReqId = $('#jobReqId').val();
    var attachment = $('#atcb').val();
    var prefix = $('#prefix').val();
    var famName = $('#famname').val();
    var nic = $('#nic').val();

    var dataObject = {
        applicationId: applicationId,
        attachment: attachment,
        jobReqId: jobReqId,
        prefix: prefix,
        famName: famName,
        nic: nic,
    }

    $.ajax({
        type: "POST",
        url: applicationAttachingFormSubmitUrl,
        async: false,
        data: dataObject,
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        beforeSend: function () {
            cursorWait();
            add_panelLoader($('#application-insert-form'));
        },
        success: function (status) {
            if (status.alert['type'] == "success") {
                getApplicationData();
                successAlert(status.alert['mssg'], status.alert['burl'], status.alert['rfms']);
            } else if (status.alert['type'] == "danger") {
                dangerAlert(status.alert['mssg'], status.alert['burl'], status.alert['rfms']);
            } else if (status.alert['type'] == "info") {
                infoAlert(status.alert['mssg'], status.alert['burl'], '');
            } else if (status.alert['type'] == "warning") {
                warningAlert(status.alert['mssg'], status.alert['burl'], '');
            }

            remove_panelLoader($('#application-insert-form'));
            cursorDefault();
            formclear();
        },
        error: function () {
            remove_panelLoader($('#application-insert-form'));
            cursorDefault();
        },
    }).fail(function (xhr, status, textStatus, error) {
        located(xhr);
    });
}

尝试过的修复代码（未生效） #

function saveData() {
    $('mfrm').submit(function(event){

        event.preventDefault();
        var formData = new FormData($(this)[0]);
        $.ajax({
            headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') },
            url: applicationAttachingFormSubmitUrl,
            data: formData,
            type: 'post',
            async: false,
            processData: false,
            contentType: false,
            success:function(response){
                console.log(response);
                alert('uploaded');
            },
            error: function () {
                console.log('error');
            },
        });

    });
}

问题分析与修正方案 #

核心问题点 #

1. 选择器错误：尝试代码里的$('mfrm')没有加ID选择符#，应该是$('#mfrm')
2. 事件绑定逻辑错误：在saveData函数里绑定表单提交事件，若该函数是通过按钮点击触发，会导致事件重复绑定且不会立即执行提交
3. CSRF Token标签不匹配：原代码用的是meta[name="csrf-token"]，尝试代码里写成了meta[name="_token"]，二者需统一

修正后的Ajax代码 #

function saveData() {
    // 阻止表单默认提交行为
    event.preventDefault();
    
    // 获取表单DOM实例，构造FormData（自动包含所有表单字段，包括文件）
    var form = $('#mfrm')[0];
    var formData = new FormData(form);

    $.ajax({
        type: "POST",
        url: applicationAttachingFormSubmitUrl,
        async: false,
        data: formData,
        // 上传文件必须设置这两个属性，禁止jQuery处理数据和设置Content-Type
        processData: false,
        contentType: false,
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        beforeSend: function () {
            cursorWait();
            add_panelLoader($('#application-insert-form'));
        },
        success: function (status) {
            if (status.alert['type'] == "success") {
                getApplicationData();
                successAlert(status.alert['mssg'], status.alert['burl'], status.alert['rfms']);
            } else if (status.alert['type'] == "danger") {
                dangerAlert(status.alert['mssg'], status.alert['burl'], status.alert['rfms']);
            } else if (status.alert['type'] == "info") {
                infoAlert(status.alert['mssg'], status.alert['burl'], '');
            } else if (status.alert['type'] == "warning") {
                warningAlert(status.alert['mssg'], status.alert['burl'], '');
            }

            remove_panelLoader($('#application-insert-form'));
            cursorDefault();
            formclear();
        },
        error: function () {
            remove_panelLoader($('#application-insert-form'));
            cursorDefault();
        },
    }).fail(function (xhr, status, textStatus, error) {
        located(xhr);
    });
}

Laravel后端验证示例 #

确保控制器正确接收并验证文件：

public function store(Request $request)
{
    // 验证规则，可根据需求调整文件类型和大小
    $validated = $request->validate([
        'applicationId' => 'required',
        'jobReqId' => 'required',
        'attachment' => 'file|mimes:pdf,doc,docx|max:2048',
        // 其他字段验证规则
    ]);

    // 处理文件上传
    if ($request->hasFile('attachment')) {
        // 存储文件到storage/app/attachments目录
        $filePath = $request->file('attachment')->store('attachments');
        // 后续可将$filePath存入数据库
    }

    // 返回前端需要的响应格式
    return response()->json([
        'alert' => [
            'type' => 'success',
            'mssg' => '提交成功',
            'burl' => '',
            'rfms' => ''
        ]
    ]);
}

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