javascript - 使用ajax发送文件无法按预期工作

Question

我有一个获取文件和其他输入的表单，我想将这些数据传递给我的 ajax 函数。但是当我检查服务器中的这些文件时，服务器没有收到该文件。我是 ajax 和 Jquery 新手。这是我所做的。

<form id = "comp_inter_form">
<input type="radio"  name="inter_fit" id="inter_good_fit" value = "good" >
<input type="radio" name="inter_fit" id="inter_bad_fit" 
<input id="report_upload" type="file"/>
<input id="skype_upload" type="file"/> 
<input id="audio_upload" type="file"/> 
<input type = "submit" class = "update_interview_btn btn btn-primary" value = "Update"/>                 
</form>  

Ajax函数

function completeInterview(id,profile_id){
    console.log("Candidate ID is : "+id+"\n Profile id is :"+profile_id );
    $('#completeIntModal').modal('show');
    var candidate_id = id;
    var profile_id = profile_id;
    var inter_fit,report_file,skype_file,audio_file;


    $("#comp_inter_form").on('submit',function(){
        var inter_fit = $("input[name=inter_fit]:checked").val();
        var report_file = $("#report_upload").prop('files');
        var skype_file = $("#skype_upload").prop('files');
        var audio_file = $("#audio_upload").prop('files');
        var dataString = 'inter_fit='  +inter_fit+ '&report_file='  +report_file+ '&skype_file='  +skype_file+ '&audio_file='  +audio_file+ '&candidate_id=' +candidate_id+ '&profile_id=' +profile_id;


        $.ajax({

            type: "POST",
            url: "/complete_interview",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: dataString,
            cache: false,
            success: function(data) {
                alert(data.msg);
            },
            error : function(xhr ,status ,error)
            {
                console.log(xhr);
                alert(xhr);
            }
        });
    });

Answer 1

请尝试如下所示并检查它是否有效，当您尝试通过文件输入通过ajax发布内容时，必须单独处理。 为此，您必须使用 FormData。

 $("#comp_inter_form").on('submit',function(){
        var inter_fit = $("input[name=inter_fit]:checked").val();
        var report_file = $("#report_upload").prop('files');
        var skype_file = $("#skype_upload").prop('files');
        var audio_file = $("#audio_upload").prop('files');
        var dataString = 'inter_fit='  +inter_fit+ '&report_file='  +report_file+ '&skype_file='  +skype_file+ '&audio_file='  +audio_file+ '&candidate_id=' +candidate_id+ '&profile_id=' +profile_id;

        var formData = new FormData();
        formData.append("inter_fit",inter_fit);
        formData.append("candidate_id",candidate_id);
        formData.append("profile_id",profile_id);
        var fileInput = $("#report_upload").get(0);
        formData.append("report_file",fileInput.files[0]);              

        fileInput = $("#skype_upload").get(0);
        formData.append("skype_file",fileInput.files[0]);              

        fileInput = $("#audio_upload").get(0);
        formData.append("audio_file",fileInput.files[0]);              


        $.ajax({

            type: "POST",
            url: "/complete_interview",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: formData,
            contentType: false, // Not to set any content header
            processData: false, // Not to process data
            cache: false,
            success: function(data) {
                alert(data.msg);
            },
            error : function(xhr ,status ,error)
            {
                console.log(xhr);
                alert(xhr);
            }
        });

在服务器端，您需要检查已发布的文件数组并相应地处理它们。