使用 Jquery Ajax 将文件上传到 Laravel 后端

Question

我有一个 Laravel 应用程序，它有一个使用 Ajax 调用提交数据的表单，提交的数据由 Laravel 后端处理。对于文本数据一切正常，但我需要向其添加文件上传，但是当我尝试使用相同的代码提交数据时，它不起作用。

这个表单是一个 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);
    });
}

我试过以下方法但没有用。这是其他解决方案和教程中提到的方式。如果您需要更多详细信息来澄清某些内容，我可以更新代码。 TIA！

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');
            },
        });

    });
}