javascript - 如何在 $.ajax 中沿着 FormData 传递附加参数

Question

我正在使用 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'] 未定义。

谢谢你!

Answer 1

将一些值附加到现有表单数据。就做like this

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

另外，尝试删除case的引号

更改此数据:{"case":"bannerUpload","form_data":form_data},

至

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

提示:

另请检查控制台中的“网络”选项卡，确保一切正常