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

时间:2017-01-20 08:10:47

标签: javascript jquery ajax

我有一个表单可以获取文件和其他输入,我想将这些数据传递给我的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);
            }
        });
    });

1 个答案:

答案 0 :(得分:2)

请尝试使其像下面这样并检查它是否有效。当您尝试使用文件输入发布内容VIA 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);
            }
        });

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