发送FORMDATA和字符串数据一起通过JQuery的AJAX？ [英] Send FormData and String Data Together Through JQuery AJAX?

问题描述

我如何上传与 FORMDATA文件，输入字符串数据（）？举例来说，我有很多其他的隐藏输入数据，我需要他们被发送到服务器，

HTML

 ＆LT;形式的行动=image.php方法=邮报是enctype =的multipart / form-data的＆GT;
＆LT;输入类型=文件名称=文件[]多=/＆GT;
＆LT;输入类型=隐藏名称=PAGE_ID值=＆LT; PHP的echo $ PAGE_ID;？＆GT;/＆GT;
＆LT;输入类型=隐藏名称=CATEGORY_ID值=＆LT; PHP的echo $ item_category-＆GT; CATEGORY_ID;＆GT;/＆GT;
＆LT;输入类型=隐藏名称=方法值=上传/＆GT;
＆LT;输入类型=隐藏名称=要求[CATEGORY_ID]值=分类标识/＆GT;
＆LT; /形式GT;
 

通过这个code以下我只管理要发送的文件数据的而不是隐藏的输入数据。

jQuery的，

  // HTML5表单数据的对象。
变种FD =新FORMDATA（）;

VAR file_data = object.get（0）.files [I]
VAR other_data = $（'表'）序列化（）。 // PAGE_ID =安培; CATEGORY_ID = 15＆安培;方法=上传和放大器;所需％​​5Bcategory_id％5D =类别+ ID

fd.append（文件，file_data）;

$阿贾克斯（{
    网址：'add.php'，
    数据：FD，
    的contentType：假的，
    过程数据：假的，
    键入：POST，
    成功：功能（数据）{
        警报（数据）;
    }
}）;
 

server.php

 的print_r（$ _ FILES）;
的print_r（$ _ POST）;
 

因此​​，

 阵列
（
    [文件] =＆GT;排列
        （
            [名] =＆GT; xxx.doc
            [类型] =＆GT;应用/ MSWORD
            [tmp_name的值] =＆GT; C：\瓦帕\ TMP \ php7C24.tmp
            [错误] =＆GT; 0
            [大小] =＆GT; 11776
        ）

）
 

我想获得这是我的结果，虽然，

 阵列
（
    [文件] =＆GT;排列
        （
            [名] =＆GT; xxx.doc
            [类型] =＆GT;应用/ MSWORD
            [tmp_name的值] =＆GT; C：\瓦帕\ TMP \ php7C24.tmp
            [错误] =＆GT; 0
            [大小] =＆GT; 11776
        ）

）

排列
（
    [PAGE_ID] =＆GT; 1000
    [CATEGORY_ID] =＆GT; 12
    [方法] =＆GT;上载
    ...
）
 

这可能吗？

解决方案

 变种FD =新FORMDATA（）;
    VAR file_data = $（'输入[类型=文件]'）[0] .files; //对于多个文件
    对于（VAR I = 0; I＆LT; file_data.length;我++）{
        fd.append（文件_+ I，file_data [I]）;
    }
    VAR other_data = $（'表'）serializeArray（）。
    $每个（other_data，功能（键，输入）{
        fd.append（input.name，input.value）;
    }）;
    $阿贾克斯（{
        网址：'test.php的'，
        数据：FD，
        的contentType：假的，
        过程数据：假的，
        键入：POST，
        成功：功能（数据）{
            的console.log（数据）;
        }
    }）;
 

增加了为循环，改变了 .serialize（）到 .serializeArray（） 在对象引用一个每个（）追加到 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);

result,

Array
(
    [file] => Array
        (
            [name] => xxx.doc
            [type] => application/msword
            [tmp_name] => C:\wamp\tmp\php7C24.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\tmp\php7C24.tmp
            [error] => 0
            [size] => 11776
        )

)

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

Is it possible?

解决方案

    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);
        }
    });

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

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