使用Jquery AJAX 将文件上传到Laravel后端[重复]

hts6caw3  于 2023-04-29  发布在  jQuery
关注(0)|答案(1)|浏览(100)

此问题已在此处有答案

How can I upload files asynchronously with jQuery?(34个答案)
4天前关闭。
我有一个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');
            },
        });

    });
}
xggvc2p6

xggvc2p61#

尝试从JS中删除$('mfrm').submit(function(event){部分。

相关问题