我能否在JavaScript中将数组附加到“formdata”中？

Question

我能否在JavaScript中将数组附加到“formdata”中？

javascriptjqueryarraysmultipartform-data

60

我正在使用FormData上传文件。同时，我也想发送一些其他数据的数组。

当我只发送图片时，它可以正常工作。当我向formdata附加一些文本时，它也可以正常工作。但是当我尝试连接下面的“tags”数组时，其他所有内容都可以正常工作，但是没有数组被发送。

是否有关于FormData和添加数组的已知问题？

实例化formData：

formdata = new FormData();

我创建的数组。Console.log显示一切正常。

        // Get the tags
        tags = new Array();
        $('.tag-form').each(function(i){
            article = $(this).find('input[name="article"]').val();
            gender = $(this).find('input[name="gender"]').val();
            brand = $(this).find('input[name="brand"]').val();
            this_tag = new Array();
            this_tag.article = article;
            this_tag.gender = gender;
            this_tag.brand = brand;
            tags.push(this_tag);    
            console.log('This is tags array: ');
            console.log(tags);
        });
        formdata.append('tags', tags);
        console.log('This is formdata: ');
        console.log(formdata);

我该如何发送它:

        // Send to server
        $.ajax({
            url: "../../build/ajaxes/upload-photo.php",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function (response) {
                console.log(response);
                $.fancybox.close();
            }
        });

- Don P

3

为什么要向数组添加属性？使用对象代替。 - Musa

1

我怀疑这是PHP背景。在Javascript中，数组并不像这样工作。 - kapa

就是这样 :) 我会使用一个对象。 - Don P

可能是将数组附加到FormData并通过AJAX发送的重复问题。 - Martín Coll

13个回答

40

以写作为

var formData = new FormData;
var array = ['1', '2'];
for (var i = 0; i < array.length; i++) {
    formData.append('array_php_side[]', array[i]);
}

您可以通过PHP正常地接收POST / GET数组。

- Yosuke

如何在服务器端收集这些数据 - Rahul Matte

@RahulMatte 服务器端通过GET方式发送：print_r($_GET['array_php_side']); 结果：Array([0] => 1, [1] => 2) - Xerif

23

我们可以简单地这样做。

formData = new FormData;
words = ["apple", "ball", "cat"]
words.forEach((item) => formData.append("words[]", item))

// verify the data
console.log(formData.getAll("words[]"))
//["apple", "ball", "cat"]

在服务器端，你会得到 words = ["apple", "ball", "cat"]

- rakeshpatra

3

这对我没用。我得到了 words[]：（二进制）``` - TigerCode

很奇怪，在整个互联网上，关于这个问题的信息都非常少。就我个人而言，对于PHP后端来说，它出奇地运行得非常好。 - undefined

18

< p>将"xxx[]" 用作formdata中字段的名称（在您的情况下，您将获得一个包含字符串化对象的数组）

因此，在您的循环内部

$('.tag-form').each(function(i){
            article = $(this).find('input[name="article"]').val();
            gender = $(this).find('input[name="gender"]').val();
            brand = $(this).find('input[name="brand"]').val();
            this_tag = new Array();
            this_tag.article = article;
            this_tag.gender = gender;
            this_tag.brand = brand;
            //tags.push(this_tag);    
            formdata.append('tags[]', this_tag);
...

- halfbit

太棒了！我的需求与 OP 的类似，但我想用文件输入数组来填充 FormData 对象。我正在尝试使用 AJAX 上传任意数量的文件，用户可以使用标准表单输入元素指定这些文件。服务器端实现要求所有文件都嵌套在一个单一的键下，这是我能够实现的唯一方法。在 https://developer.mozilla.org/en-US/docs/Web/API/FormData/append 上绝对没有提到这种数组表示法技术。halfbit，我无法感谢你！ - Ben Johnson

我在上述文档中添加了一个示例，演示了这个特定用法。包含方括号的能力在处理多文件上传时非常有用，因为生成的数据结构更适合循环。再次感谢！ - Ben Johnson

7

功能：

function appendArray(form_data, values, name){
    if(!values && name)
        form_data.append(name, '');
    else{
        if(typeof values == 'object'){
            for(key in values){
                if(typeof values[key] == 'object')
                    appendArray(form_data, values[key], name + '[' + key + ']');
                else
                    form_data.append(name + '[' + key + ']', values[key]);
            }
        }else
            form_data.append(name, values);
    }

    return form_data;
}

使用：

var form = document.createElement('form');// or document.getElementById('my_form_id');
var formdata = new FormData(form);

appendArray(formdata, {
    sefgusyg: {
        sujyfgsujyfsg: 'srkisgfisfsgsrg',
    },
    test1: 5,
    test2: 6,
    test3: 8,
    test4: 3,
    test5: [
        'sejyfgjy',
        'isdyfgusygf',
    ],
});

- Doglas

5

这是我所采用的方法：

const data = new FormData();
data.append('id', class.id);
data.append('name', class.name);

class.people.forEach((person, index) => {
    data.append(`people[${index}].id`, person.id);
    data.append(`people[${index}].firstname`, person.firstname);
    data.append(`people[${index}].lastname`, person.lastname);

    // Append images
    person.images.forEach((image, imageIndex) =>
        data.append(`people[${index}].images`, {
            name: 'image' + imageIndex,
            type: 'image/jpeg',
            uri: image,
        })
    );
});

我在前端使用React，在后端使用Asp.Net。

- Tom el Safadi

3

var formData = new FormData; var arr = ['item1', 'item2', 'item3'];

arr.forEach(item => {
    formData.append(
        "myFile",item
    ); });

- Amey

3

您可以简单地这样做：

var formData = new FormData();
formData.append('array[key1]', this.array.key1);
formData.append('array[key2]', this.array.key2);

- Mobasher Fasihy

2

var formData = new FormData;
var alphaArray = ['A', 'B', 'C','D','E'];
for (var i = 0; i < alphaArray.length; i++) {
    formData.append('listOfAlphabet', alphaArray [i]);
}

在你的请求中，你会得到一个字母数组。最初的回答。

- Deva

1

这是一个很棒的想法，但只有在使用方括号 [] 时，我的代码才能正常工作：formData.append('listOfAlphabet[]', alphaArray [i]);。否则，PHP 只会获取到最后一项，而不是整个数组。 - Steevie

1

你只能将数组转换为字符串并添加它。即使数组只有一个项，也要将其作为实际数组发送。

const array = [ 1, 2 ];
let formData = new FormData();
formData.append("numbers", JSON.stringify(array));

- Marko Rochevski

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- raina77ow · Accepted Answer

这个怎么样？

formdata.append('tags', JSON.stringify(tags));

......因此，在服务器上使用json_decode对其进行解析。请注意，FormData.append的第二个值可以是Blob、File或字符串，如果都不是，则将该值转换为字符串。

如果不是Blob、File或字符串，则会将该值转换为字符串。

我认为，您的tags数组包含对象（@Musa是正确的，顺便说一句；将this_tag设置为数组，然后将字符串属性分配给它没有意义；应该使用普通对象），因此本地转换（使用toString()）将不足以完成任务。但是，使用JSON就可以获取信息。

作为附注，我会将属性分配块简单地重写为以下形式：

tags.push({article: article, gender: gender, brand: brand});