关于javascript：将数组附加到FormData并通过AJAX发送

appending array to FormData and send via AJAX

我使用Ajax提交一个包含数组、文本字段和文件的多部分表单。

因此，我将每个var附加到主数据中

1
2
3
4
5
6
7
8
9
10
11

var attachments = document.getElementById('files');
var data= new FormData();

for (i=0; i< attachments.files.length; i++){
data.append('file', attachments.files[i]);
console.log(attachments.files[i]);

data.append ('headline', headline);
data.append ('article', article);
data.append ('arr', arr);
data.append ('tag', tag);

然后，我使用Ajax函数将它发送到一个PHP文件，存储在SQL数据库中。

1
2
3
4
5
6
7
8
9

$.ajax({
type:"post",
url: 'php/submittionform.php',
cache: false,
processData: false,
contentType: false,
data: data,
success: function(request) {$('#box').html(request); }
})

但在PHP方面，作为数组的arr变量显示为字符串。

当我不使用Ajax作为表单数据发送它，而是使用简单的$.POST选项时，我会将它作为PHP端的数组获取，但随后我就不能发送文件了。

有什么解决办法吗？

您也可以通过FormData发送阵列，方法如下：

1
2
3
4
5

var formData = new FormData;
var arr = ['this', 'is', 'an', 'array'];
for (var i = 0; i < arr.length; i++) {
formData.append('arr[]', arr[i]);
}

因此，您可以像使用简单的HTML表单那样编写arr[]。如果是PHP，它应该可以工作。

您可能会发现本文很有用：如何在查询字符串中传递数组？

相关讨论

类型脚本版本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

export class Utility {
public static convertModelToFormData(model: any, form: FormData = null, namespace = ''): FormData {
let formData = form || new FormData();
let formKey;

for (let propertyName in model) {
if (!model.hasOwnProperty(propertyName) || !model[propertyName]) continue;
let formKey = namespace ? `${namespace}[${propertyName}]` : propertyName;
if (model[propertyName] instanceof Date)
formData.append(formKey, model[propertyName].toISOString());
else if (model[propertyName] instanceof Array) {
model[propertyName].forEach((element, index) => {
const tempFormKey = `${formKey}[${index}]`;
this.convertModelToFormData(element, formData, tempFormKey);
});
}
else if (typeof model[propertyName] === 'object' && !(model[propertyName] instanceof File))
this.convertModelToFormData(model[propertyName], formData, formKey);
else
formData.append(formKey, model[propertyName].toString());
}
return formData;
}
}

使用：

1	let formData = Utility.convertModelToFormData(model);

这是一个老问题，但我最近遇到了这个问题，即随文件一起发布对象。我需要能够发布一个对象，以及对象和数组的子属性。

下面的函数将遍历一个对象并创建正确的FormData对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// formData - instance of FormData object
// data - object to post
function getFormData(formData, data, previousKey) {
if (data instanceof Object) {
Object.keys(data).forEach(key => {
const value = data[key];
if (value instanceof Object && !Array.isArray(value)) {
return this.getFormData(formData, value, key);
}
if (previousKey) {
key = `${previousKey}[${key}]`;
}
if (Array.isArray(value)) {
value.forEach(val => {
formData.append(`${key}[]`, val);
});
} else {
formData.append(key, value);
}
});
}
}

这将转换以下JSON-

1
2
3
4
5
6
7
8

{
name: 'starwars',
year: 1977,
characters: {
good: ['luke', 'leia'],
bad: ['vader'],
},
}

进入以下表单数据

1
2
3
4
5

name, starwars
year, 1977
characters[good][], luke
characters[good][], leia
characters[bad][], vader

相关讨论

将所有类型输入添加到FormData

1
2
3
4
5
6

const formData = new FormData();
for (let key in form) {
Array.isArray(form[key])
? form[key].forEach(value => formData.append(key + '[]', value))
: formData.append(key, form[key]) ;
}

如果有嵌套的对象和数组，填充FormData对象的最佳方法是使用递归。

1
2
3
4
5
6
7
8
9
10
11
12
13

下一版本适用于包含简单值数组的模型：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20