如何在$.ajax中沿FormData传递附加参数 - how to pass additional parameters along FormData in $.ajax

how to pass additional parameters along FormData in $.ajax

本文关键字：参数 FormData 中沿 ajax | 更新日期: 2023-09-27

我正在使用FormData上传一个图像，但在传递附加参数时遇到了问题。我希望我所有的ajax调用都位于同一个脚本上，即ajax.php，并根据传递的附加参数执行脚本的部分。

我的ajax调用如下：

$(document).on('click', '#btn-banner-upload', function(){
    var file_data = $("#bannerUpload").prop("files")[0];   
    var form_data = new FormData();                  
    form_data.append("file", file_data);
    console.log(form_data);
     $.ajax({
                url: "../server/upload.php",    
                cache: false,
                contentType: false,
                processData: false,
                data: {"case":"bannerUpload","form_data":form_data},
                dataType: 'json',                         
                type: 'post'
     }).done(function(response){
        console.log(response);
        $('html').css('background', 'url('+response.path+') no-repeat center center fixed');
     }).fail(function(response){
        console.log(response);
     })
})

我的php脚本看起来是这样的：

if($_POST['case'] == 'bannerUpload'){
    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
        echo '{"result": "ok", "path":"../server/uploads/' . $_FILES["file"]["name"].'"}';
    }
}

不幸的是，我返回$_POST['case']未定义。

谢谢！

向现有表单数据附加一些值。就像这个一样

var form_data= new FormData();   
var key = 'xyz'; 
form_data.append( 'yourValue', key );

此外，尝试删除case 的引号

更改此data: {"case":"bannerUpload","form_data":form_data},

至

data: {case:"bannerUpload",form_data:"form_data"},

提示：

还要检查控制台中的"网络"选项卡，以确保一切正常。