我可以在javascript中将数组附加到“formdata”吗？
Posted
技术标签:
【中文标题】我可以在javascript中将数组附加到“formdata”吗？【英文标题】：Can I append an array to 'formdata' in javascript? 【发布时间】：2012-12-11 04:22:37 【问题描述】：我正在使用 FormData 上传文件。我还想发送一组其他数据。
当我只发送图像时，它工作正常。当我将一些文本附加到表单数据时，它工作正常。当我尝试在下面附加“标签”数组时，其他一切正常，但没有发送数组。
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();
);
【问题讨论】：
为什么要向数组添加属性？改为使用对象。 我怀疑有 PHP 背景。数组在 javascript 中并不是这样工作的。 就是这样 :) 我将使用一个对象。 appending array to FormData and send via AJAX的可能重复 【参考方案1】：这个怎么样？
formdata.append('tags', JSON.stringify(tags));
... 并相应地在服务器上使用json_decode 对其进行解析。看，FormData.append 的第二个值可以是...
Blob、File 或字符串，如果两者都不是，则将值转换为 字符串
在我看来，您的 tags 数组包含对象（@Musa 是对的，顺便说一句；使 this_tag 成为一个数组，然后为其分配字符串属性没有意义；请改用普通对象），所以本机转换（toString()）是不够的。不过，JSON'ing 应该可以获取信息。
作为旁注，我会将属性分配块重写为：
tags.push(article: article, gender: gender, brand: brand);
【讨论】：
唯一的问题是 JSON.stringify() 给了我带有转义引号的输出。这使得它无法在 PHP 端进行解释。你知道如何去字符串化吗？ 这里是输出 [\"article\":\"Article\",\"gender\":\"Gender\",\"brand\":\"Brand\" ] 如果您正在使用带有自动映射或类似功能的 asp.net，那么这个答案就是您所需要的。 ***.com/a/28434829/625581 嗨@raina77ow 我想喜欢这个发送数组，但服务器端我没有得到这个数组对象图像正在获取但数组没有得到？你能帮我吗 不应该这样做。简单的方法是附加到带有方括号的键。【参考方案2】：写成
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。
【讨论】：
如何在服务器端收集这些数据 @RahulMatte 服务器端通过 GET 发送：print_r($_GET['array_php_side']); 结果：Array([0] => 1, [1] => 2)【参考方案3】：
使用"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);
...
【讨论】：
太棒了！我的需求类似于 OP，但我想用文件输入数组填充FormData 对象。我正在尝试使用用户使用标准表单输入元素指定的 AJAX 上传任意数量的文件。服务器端实现要求所有文件嵌套在一个键下，这是我能够实现的唯一方法。 developer.mozilla.org/en-US/docs/Web/API/FormData/append 绝对没有提到这种数组符号技术。太感谢你了，半点！
我在上面引用的文档中添加了一个示例来演示此特定用法。在处理多文件上传时，包含方括号的功能非常有用，因为生成的数据结构更有利于循环。再次感谢！【参考方案4】：
我们可以这样做。
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"]
【讨论】：
这对我不起作用。我得到了words[] : (binary) words[] : (binary)【参考方案5】：
功能：
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',
],
);
【讨论】：
【参考方案6】：你可以这样做：
var formData = new FormData();
formData.append('array[key1]', this.array.key1);
formData.append('array[key2]', this.array.key2);
【讨论】：
【参考方案7】：var formData = new FormData;
var alphaArray = ['A', 'B', 'C','D','E'];
for (var i = 0; i < alphaArray.length; i++)
formData.append('listOfAlphabet', alphaArray [i]);
并且在您的请求中，您将获得字母数组。
【讨论】：
绝妙的想法，但这仅在使用括号[] 时才在我的代码中有效：formData.append('listOfAlphabet[]', alphaArray [i]);。否则 PHP 不会得到完整的数组，而只会得到最后一项。【参考方案8】：
var formData = new FormData; var arr = ['item1', 'item2', 'item3'];
arr.forEach(item =>
formData.append(
"myFile",item
); );
【讨论】：
【参考方案9】：您只能对数组进行字符串化并附加它。将数组作为实际数组发送，即使它只有一项。
const array = [ 1, 2 ];
let formData = new FormData();
formData.append("numbers", JSON.stringify(array));
【讨论】：
【参考方案10】：当我发送文件 + 文本 + 数组时，这对我有用：
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',
;
【讨论】：
【参考方案11】：我就是这样做的：
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。
【讨论】：
【参考方案12】：我在 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])
)
【讨论】：
【参考方案13】：在前端使用 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:
...
...
【讨论】：
以上是关于我可以在javascript中将数组附加到“formdata”吗？的主要内容，如果未能解决你的问题，请参考以下文章