formdata怎么传数组_关于javascript：将数组附加到FormData并通过AJAX发送

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

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

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数据库中。

$.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发送阵列，方法如下：

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，它应该可以工作。

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

@oleg在formData.append('arr[]', arr[i]);中写arr[]需要什么？为什么arr不正确？我两个都试过了，但只有arr[]起作用。

@totoro因为在arr的情况下，您只需在每个循环迭代中重新定义这个值，最后，最终的值将等于最后一个数组元素，而不是整个数组

@如果重新定义是这样的话，那么arr[]中有什么不同，为什么不重新定义arr[]？arr[]也是一个字符串。在我的例子中，当测试arr和arr[]时，都没有被重新定义。我在formdata中得到了多个数组，键相同，但值不同。所以我得到了值为1的arr，另一个值为2的arr。

@托托罗是的，你是对的，我的错。我认为这是服务器端特有的问题。不同的语言可能不同地解析查询字符串。例如，PHP的行为与您所描述的一样，但我看到了示例(如果内存使用Java)，其中EDCOX1(2)也适用于数组。在本主题中，有一个更详细的问题答案。

如果有人想要发布一组对象，您可以将此答案扩展如下：for (var i = 0; i < myArr; i++) { var myItemInArr = myArr[i]; for (var prop in myItemInArr) { fileData.append(`myArr[${i}][${prop}]`, myItemInArr[prop]); } }。

@我认为这是规范的一部分。

一个只有一个项的数组怎么样？那需要特别处理吗？

您有几个选项：将其转换为JSON字符串，然后用PHP解析(推荐)

JS

var json_arr = JSON.stringify(arr);

PHP

$arr = json_decode($_POST['arr']);

或者使用@curios的方法

通过FormData发送阵列。不推荐：用序列化数据，然后用PHP反序列化

JS

// Use or any other delimiter you want

var serial_arr = arr.join("");

PHP

$arr = explode("", $_POST['arr']);

问题是数组包含实数行，带有空格和标点符号。我不想把事情搞砸。

当您使用JSON对其进行编码和解析时，数据不会丢失。试试看；)

如果您使用的是带有自动映射或类似功能的ASP.NET，那么@好奇的答案就是您需要的。

@Richard de Wit如果您有这样的数据文件或表单数据，您将在json.stringfy中丢失它们。

不使用对象数组

我更喜欢细线化，更简单。因为您需要执行某种递归来使用[]传递数组，但很好地知道可以这样做。

类型脚本版本：

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;

}

}

使用：

let formData = Utility.convertModelToFormData(model);

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

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

// 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-

{

name: 'starwars',

year: 1977,

characters: {

good: ['luke', 'leia'],

bad: ['vader'],

},

}

进入以下表单数据

name, starwars

year, 1977

characters[good][], luke

characters[good][], leia

characters[bad][], vader

它对我很有用，只需要在append中的值上应用字符串(value)(否则它将失败，因为true/false)。另外，它应该是(value !== null) && formData.append(key, value)，而不是formData.append(key, value)，否则它在空值上失败。

将所有类型输入添加到FormData

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对象的最佳方法是使用递归。

function createFormData(formData, data, key) {

if ( ( typeof data === 'object' && data !== null ) || Array.isArray(data) ) {

for ( let i in data ) {

if ( ( typeof data[i] === 'object' && data[i] !== null ) || Array.isArray(data[i]) ) {

createFormData(formData, data[i], key + '[' + i + ']');

} else {

formData.append(key + '[' + i + ']', data[i]);

}

}

} else {

formData.append(key, data);

}

}

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

function convertModelToFormData(val, formData = new FormData(), namespace = '') {

if((typeof val !== 'undefined') && (val !== null)) {

if(val instanceof Date) {

formData.append(namespace, val.toISOString());

} else if(val instanceof Array) {

for(let element of val) {

convertModelToFormData(element, formData, namespace + '[]');

}

} else if(typeof val === 'object' && !(val instanceof File)) {

for (let propertyName in val) {

if(val.hasOwnProperty(propertyName)) {

convertModelToFormData(val[propertyName], formData, namespace ? namespace + '[' + propertyName + ']' : propertyName);

}

}

} else {

formData.append(namespace, val.toString());

}

}

return formData;

}