Question

如何在一个jQuery AJAX调用中传递文本输入和文件？我下面的代码很好地传递了文本输入字段，但文件输入返回错误（见下文）。

var formData = new FormData();

    formData = {
        'name'              : $('input[name=name]').val(),
        'email'             : $('input[name=email]').val(),
        'superheroAlias'    : $('input[name=superheroAlias]').val()
    };

    formData.append('profile_pic', $('input[id="profile_pic"]')[0].files[0]);

    // process the form
    $.ajax({
        type        : 'POST', 
        url         : 'process.php', 
        data        : formData,
        dataType    : 'json',
        processData : false,
        contentType : false,
        encode      : true
    })

试图在PHP端收到请求，如下所示：

$target_dir = "image_uploads/";
$target_file = $target_dir .rand(1,999). basename(str_replace(" ","",$_FILES["profile_pic"]["name"]));

我收到以下错误：

未定义的索引：profile_pic

我已经在Stack Overflow上找到了几个解决方案，但是还没有人为我做过这个技巧。

我该如何解决这个问题？

Answer 1

只需为您的表单绑定提交侦听器，并自动将表单数据传递给您的ajax，如下所示：

$('#form').submit(function(e){
    e.preventDefault();
    var formData = new FormData(this); 

    $.ajax({
        type        : 'POST', 
        url         : 'process.php', 
        data        : formData, 
        processData : false,
        contentType : false,
        encode      : true
    })

})

jQuery AJAX在一次调用中输入文本和文件

1 个答案: