通过 JQuery AJAX 一起发送 FormData 和 String 数据? [英] Send FormData and String Data Together Through JQuery AJAX?

问题描述

如何使用 FormData() 发布文件和输入字符串数据?例如，我有许多其他隐藏的输入数据，我需要将它们发送到服务器，

How can I post file and input string data with FormData()? For instance, I have many other hidden input data that I need them to be sent to the server,

html,

<form action="image.php" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple="" />
<input type="hidden" name="page_id" value="<?php echo $page_id;?>"/>
<input type="hidden" name="category_id" value="<?php echo $item_category->category_id;?>"/>
<input type="hidden" name="method" value="upload"/>
<input type="hidden" name="required[category_id]" value="Category ID"/>
</form>

使用下面的代码，我只能发送文件数据而不是隐藏的输入数据.

With this code below I only manage to send the file data but not the hidden input data.

jquery,

// HTML5 form data object.
var fd = new FormData();

var file_data = object.get(0).files[i];
var other_data = $('form').serialize(); // page_id=&category_id=15&method=upload&required%5Bcategory_id%5D=Category+ID

fd.append("file", file_data);

$.ajax({
    url: 'add.php',
    data: fd,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

server.php

print_r($_FILES);
print_r($_POST);

结果，

Array
(
    [file] => Array
        (
            [name] => xxx.doc
            [type] => application/msword
            [tmp_name] => C:wamp	mpphp7C24.tmp
            [error] => 0
            [size] => 11776
        )

)

虽然我想得到这个作为我的结果，

I would like to get this as my result though,

Array
(
    [file] => Array
        (
            [name] => xxx.doc
            [type] => application/msword
            [tmp_name] => C:wamp	mpphp7C24.tmp
            [error] => 0
            [size] => 11776
        )

)

Array
(
    [page_id] => 1000
    [category_id] => 12
    [method] => upload
    ...
)

有可能吗?

推荐答案

var fd = new FormData();
var file_data = $('input[type="file"]')[0].files; // for multiple files
for(var i = 0;i<file_data.length;i++){
    fd.append("file_"+i, file_data[i]);
}
var other_data = $('form').serializeArray();
$.each(other_data,function(key,input){
    fd.append(input.name,input.value);
});
$.ajax({
    url: 'test.php',
    data: fd,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        console.log(data);
    }
});

添加了一个 for 循环并将 .serialize() 更改为 .serializeArray() 以用于 .each() 附加到 FormData.

Added a for loop and changed .serialize() to .serializeArray() for object reference in a .each() to append to the FormData.

这篇关于通过 JQuery AJAX 一起发送 FormData 和 String 数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！