48

我正在使用 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();
            }
        });
4

13 回答 13

78

这个怎么样？

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

...并且相应地，json_decode在服务器上使用它来解析它。看，FormData.append 的第二个值可以是...

Blob、File 或字符串，如果两者都不是，则将值转换为字符串

在我看来，您的tags数组包含对象（@Musa 是对的，顺便说一句；创建this_tag一个数组，然后为其分配字符串属性是没有意义的；请改用普通对象），因此本机转换（with toString()）是不够的。不过，JSON'ing 应该可以获取信息。

作为旁注，我会将属性分配块重写为：

tags.push({article: article, gender: gender, brand: brand});
于 2012-12-24T23:47:32.400 回答
31

写作

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。

于 2016-01-23T03:46:38.133 回答
16

用作"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);
...
于 2014-08-19T15:41:05.587 回答
13

我们可以简单地这样做。

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"]

于 2020-08-13T13:39:22.413 回答
6

功能：

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',
    ],
});
于 2017-09-26T13:21:21.877 回答
3

只需您可以这样做：

var formData = new FormData();
formData.append('array[key1]', this.array.key1);
formData.append('array[key2]', this.array.key2);
于 2019-09-17T05:36:05.813 回答
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]);
}

并且在您的请求中，您将获得一系列字母。

于 2019-01-29T10:07:23.967 回答
2 
var formData = new FormData; var arr = ['item1', 'item2', 'item3'];

arr.forEach(item => {
    formData.append(
        "myFile",item
    ); });
于 2020-07-24T11:48:10.180 回答
1

当我发送文件+文本+数组时，这对我有用：

const uploadData = new FormData();
if (isArray(value)) {
  const k = `${key}[]`;
  uploadData.append(k, value);
} else {
  uploadData.append(key, value);
}


const headers = {
  'Content-Type': 'multipart/form-data',
};
于 2019-05-27T10:20:39.613 回答
1

您只能对数组进行字符串化并附加它。将数组作为实际数组发送，即使它只有一项。

const array = [ 1, 2 ];
let formData = new FormData();
formData.append("numbers", JSON.stringify(array));
于 2019-02-21T11:16:05.917 回答
1

我就是这样做的：

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。

于 2021-03-31T03:46:03.697 回答
0

在前端使用 JSON.stringify 如下：

...
...
const entityData = new FormData();
entityData.append("Entities Open", JSON.stringify(login_entities));
axios
.post("/oneview/load_entity", entityData)
.then(response => {
   var entity_group = response.data.entity_group;
   var entity_code = response.data.entity_code;
   var entity_name = response.data.entity_name;
})
.catch(error => {
   console.log(error);
   alert(error);
});

然后在后端使用 json.loads() 如下：

...
...
login_entities = json.loads(request.POST.get('Entities Open'))
for i in login_entities:
   ...
   ...
于 2021-10-06T13:42:28.730 回答
0

我正在使用 vuejs 中的 formData
为我发送文件（数组），下面的代码正在运行

        if(this.requiredDocumentForUploads.length > 0) {
            this.requiredDocumentForUploads.forEach(file => {
                var name = file.attachment_type  // attachment_type is using for naming
                if(document.querySelector("[name=" + name + "]").files.length > 0) {
                    formData.append("requiredDocumentForUploadsNew[" + name + "]", document.querySelector("[name=" + name + "]").files[0])
                }
            })
        }
于 2020-10-09T08:13:21.423 回答