Can I append an array to 'formdata' in javascript?

Multi tool use
I'm using FormData to upload files. I also want to send an array of other data.
When I send just the image, it works fine. When I append some text to the formdata, it works fine. When I try to attach the 'tags' array below, everything else works fine but no array is sent.
Any known issues with FormData and appending arrays?
Instantiate formData:
formdata = new FormData();
The array I create. Console.log shows everything working fine.
// 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);
How I send it:
// 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();
}
});
javascript jquery arrays multipartform-data
add a comment |
I'm using FormData to upload files. I also want to send an array of other data.
When I send just the image, it works fine. When I append some text to the formdata, it works fine. When I try to attach the 'tags' array below, everything else works fine but no array is sent.
Any known issues with FormData and appending arrays?
Instantiate formData:
formdata = new FormData();
The array I create. Console.log shows everything working fine.
// 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);
How I send it:
// 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();
}
});
javascript jquery arrays multipartform-data
3
Why are you adding properties to an array? Use an object instead.
– Musa
Dec 24 '12 at 23:49
1
I suspect a PHP background. Arrays don't really work like this in Javascript.
– kapa
Dec 24 '12 at 23:52
That's exactly it :) I will use an object.
– Don P
Dec 25 '12 at 0:34
possible duplicate of appending array to FormData and send via AJAX
– Martín Coll
Jul 10 '15 at 19:53
add a comment |
I'm using FormData to upload files. I also want to send an array of other data.
When I send just the image, it works fine. When I append some text to the formdata, it works fine. When I try to attach the 'tags' array below, everything else works fine but no array is sent.
Any known issues with FormData and appending arrays?
Instantiate formData:
formdata = new FormData();
The array I create. Console.log shows everything working fine.
// 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);
How I send it:
// 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();
}
});
javascript jquery arrays multipartform-data
I'm using FormData to upload files. I also want to send an array of other data.
When I send just the image, it works fine. When I append some text to the formdata, it works fine. When I try to attach the 'tags' array below, everything else works fine but no array is sent.
Any known issues with FormData and appending arrays?
Instantiate formData:
formdata = new FormData();
The array I create. Console.log shows everything working fine.
// 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);
How I send it:
// 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();
}
});
javascript jquery arrays multipartform-data
javascript jquery arrays multipartform-data
asked Dec 24 '12 at 23:43


Don PDon P
18.5k70202327
18.5k70202327
3
Why are you adding properties to an array? Use an object instead.
– Musa
Dec 24 '12 at 23:49
1
I suspect a PHP background. Arrays don't really work like this in Javascript.
– kapa
Dec 24 '12 at 23:52
That's exactly it :) I will use an object.
– Don P
Dec 25 '12 at 0:34
possible duplicate of appending array to FormData and send via AJAX
– Martín Coll
Jul 10 '15 at 19:53
add a comment |
3
Why are you adding properties to an array? Use an object instead.
– Musa
Dec 24 '12 at 23:49
1
I suspect a PHP background. Arrays don't really work like this in Javascript.
– kapa
Dec 24 '12 at 23:52
That's exactly it :) I will use an object.
– Don P
Dec 25 '12 at 0:34
possible duplicate of appending array to FormData and send via AJAX
– Martín Coll
Jul 10 '15 at 19:53
3
3
Why are you adding properties to an array? Use an object instead.
– Musa
Dec 24 '12 at 23:49
Why are you adding properties to an array? Use an object instead.
– Musa
Dec 24 '12 at 23:49
1
1
I suspect a PHP background. Arrays don't really work like this in Javascript.
– kapa
Dec 24 '12 at 23:52
I suspect a PHP background. Arrays don't really work like this in Javascript.
– kapa
Dec 24 '12 at 23:52
That's exactly it :) I will use an object.
– Don P
Dec 25 '12 at 0:34
That's exactly it :) I will use an object.
– Don P
Dec 25 '12 at 0:34
possible duplicate of appending array to FormData and send via AJAX
– Martín Coll
Jul 10 '15 at 19:53
possible duplicate of appending array to FormData and send via AJAX
– Martín Coll
Jul 10 '15 at 19:53
add a comment |
5 Answers
5
active
oldest
votes
How about this?
formdata.append('tags', JSON.stringify(tags));
... and, correspondingly, using json_decode
on server to deparse it. See, the second value of FormData.append can be...
a Blob, File, or a string, if neither, the value is converted to a
string
The way I see it, your tags
array contains objects (@Musa is right, btw; making this_tag
an Array, then assigning string properties to it makes no sense; use plain object instead), so native conversion (with toString()
) won't be enough. JSON'ing should get the info through, though.
As a sidenote, I'd rewrite the property assigning block just into this:
tags.push({article: article, gender: gender, brand: brand});
That's a good point thank you! Let me give it a try
– Don P
Dec 24 '12 at 23:48
The only problem is JSON.stringify() gives me the output with escaped quotes. That makes it unable to be interpreted on the PHP side. Do you know how to destringify?
– Don P
Dec 25 '12 at 4:29
Here is the output [{"article":"Article","gender":"Gender","brand":"Brand"}]
– Don P
Dec 25 '12 at 4:29
2
Did you usejson_decode
?
– raina77ow
Dec 25 '12 at 8:13
If you are using asp.net with automatic mapping or something similar, then this answer is what you need. stackoverflow.com/a/28434829/625581
– Martín Coll
Jul 10 '15 at 19:52
|
show 2 more comments
Writing as
var formData = new FormData;
var array = ['1', '2'];
for (var i = 0; i < array.length; i++) {
formData.append('array_php_side', array[i]);
}
you can receive just as normal array post/get by php.
How to collect this data on server side
– Rahul Matte
Apr 29 '16 at 9:19
This should be the correct answer I think
– zardilior
May 16 '18 at 1:42
Simple. Genius and should be the right answer
– user9168386
Aug 8 '18 at 12:33
add a comment |
use "xxx"
as name of the field in formdata (you will get an array of - stringified objects - in you case)
so within your loop
$('.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);
...
Brilliant! My needs are similar to the OP's, but I want to fill theFormData
object with an array of file inputs. I am attempting to upload an arbitrary number of files, with AJAX, which the user specifies with standard form input elements. The server-side implementation requires all of the files to be nested under a single key, and this was the only way I was able to achieve that. There is absolutely no mention of this array-notation technique at developer.mozilla.org/en-US/docs/Web/API/FormData/append . I can't thank you enough, halfbit!
– Ben Johnson
Oct 7 '15 at 12:45
I added an example to the above-cited documentation that demonstrates this specific usage. The ability to include the square brackets is hugely useful when dealing with multi-file uploads because the resultant data structure is so much more conducive to looping. Thanks again!
– Ben Johnson
Oct 7 '15 at 13:38
add a comment |
Function:
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;
}
Use:
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'
]
});
This is just great
– Vahid
Apr 21 '18 at 8:40
you are the best
– Ulterior
May 7 '18 at 11:04
add a comment |
var formData = new FormData;
var alphaArray = ['A', 'B', 'C','D','E'];
for (var i = 0; i < alphaArray.length; i++) {
formData.append('listOfAlphabet', alphaArray [i]);
}
And In your request you will get array of alphabets.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f14026539%2fcan-i-append-an-array-to-formdata-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
How about this?
formdata.append('tags', JSON.stringify(tags));
... and, correspondingly, using json_decode
on server to deparse it. See, the second value of FormData.append can be...
a Blob, File, or a string, if neither, the value is converted to a
string
The way I see it, your tags
array contains objects (@Musa is right, btw; making this_tag
an Array, then assigning string properties to it makes no sense; use plain object instead), so native conversion (with toString()
) won't be enough. JSON'ing should get the info through, though.
As a sidenote, I'd rewrite the property assigning block just into this:
tags.push({article: article, gender: gender, brand: brand});
That's a good point thank you! Let me give it a try
– Don P
Dec 24 '12 at 23:48
The only problem is JSON.stringify() gives me the output with escaped quotes. That makes it unable to be interpreted on the PHP side. Do you know how to destringify?
– Don P
Dec 25 '12 at 4:29
Here is the output [{"article":"Article","gender":"Gender","brand":"Brand"}]
– Don P
Dec 25 '12 at 4:29
2
Did you usejson_decode
?
– raina77ow
Dec 25 '12 at 8:13
If you are using asp.net with automatic mapping or something similar, then this answer is what you need. stackoverflow.com/a/28434829/625581
– Martín Coll
Jul 10 '15 at 19:52
|
show 2 more comments
How about this?
formdata.append('tags', JSON.stringify(tags));
... and, correspondingly, using json_decode
on server to deparse it. See, the second value of FormData.append can be...
a Blob, File, or a string, if neither, the value is converted to a
string
The way I see it, your tags
array contains objects (@Musa is right, btw; making this_tag
an Array, then assigning string properties to it makes no sense; use plain object instead), so native conversion (with toString()
) won't be enough. JSON'ing should get the info through, though.
As a sidenote, I'd rewrite the property assigning block just into this:
tags.push({article: article, gender: gender, brand: brand});
That's a good point thank you! Let me give it a try
– Don P
Dec 24 '12 at 23:48
The only problem is JSON.stringify() gives me the output with escaped quotes. That makes it unable to be interpreted on the PHP side. Do you know how to destringify?
– Don P
Dec 25 '12 at 4:29
Here is the output [{"article":"Article","gender":"Gender","brand":"Brand"}]
– Don P
Dec 25 '12 at 4:29
2
Did you usejson_decode
?
– raina77ow
Dec 25 '12 at 8:13
If you are using asp.net with automatic mapping or something similar, then this answer is what you need. stackoverflow.com/a/28434829/625581
– Martín Coll
Jul 10 '15 at 19:52
|
show 2 more comments
How about this?
formdata.append('tags', JSON.stringify(tags));
... and, correspondingly, using json_decode
on server to deparse it. See, the second value of FormData.append can be...
a Blob, File, or a string, if neither, the value is converted to a
string
The way I see it, your tags
array contains objects (@Musa is right, btw; making this_tag
an Array, then assigning string properties to it makes no sense; use plain object instead), so native conversion (with toString()
) won't be enough. JSON'ing should get the info through, though.
As a sidenote, I'd rewrite the property assigning block just into this:
tags.push({article: article, gender: gender, brand: brand});
How about this?
formdata.append('tags', JSON.stringify(tags));
... and, correspondingly, using json_decode
on server to deparse it. See, the second value of FormData.append can be...
a Blob, File, or a string, if neither, the value is converted to a
string
The way I see it, your tags
array contains objects (@Musa is right, btw; making this_tag
an Array, then assigning string properties to it makes no sense; use plain object instead), so native conversion (with toString()
) won't be enough. JSON'ing should get the info through, though.
As a sidenote, I'd rewrite the property assigning block just into this:
tags.push({article: article, gender: gender, brand: brand});
edited Dec 24 '12 at 23:53
answered Dec 24 '12 at 23:47
raina77owraina77ow
76.8k10137175
76.8k10137175
That's a good point thank you! Let me give it a try
– Don P
Dec 24 '12 at 23:48
The only problem is JSON.stringify() gives me the output with escaped quotes. That makes it unable to be interpreted on the PHP side. Do you know how to destringify?
– Don P
Dec 25 '12 at 4:29
Here is the output [{"article":"Article","gender":"Gender","brand":"Brand"}]
– Don P
Dec 25 '12 at 4:29
2
Did you usejson_decode
?
– raina77ow
Dec 25 '12 at 8:13
If you are using asp.net with automatic mapping or something similar, then this answer is what you need. stackoverflow.com/a/28434829/625581
– Martín Coll
Jul 10 '15 at 19:52
|
show 2 more comments
That's a good point thank you! Let me give it a try
– Don P
Dec 24 '12 at 23:48
The only problem is JSON.stringify() gives me the output with escaped quotes. That makes it unable to be interpreted on the PHP side. Do you know how to destringify?
– Don P
Dec 25 '12 at 4:29
Here is the output [{"article":"Article","gender":"Gender","brand":"Brand"}]
– Don P
Dec 25 '12 at 4:29
2
Did you usejson_decode
?
– raina77ow
Dec 25 '12 at 8:13
If you are using asp.net with automatic mapping or something similar, then this answer is what you need. stackoverflow.com/a/28434829/625581
– Martín Coll
Jul 10 '15 at 19:52
That's a good point thank you! Let me give it a try
– Don P
Dec 24 '12 at 23:48
That's a good point thank you! Let me give it a try
– Don P
Dec 24 '12 at 23:48
The only problem is JSON.stringify() gives me the output with escaped quotes. That makes it unable to be interpreted on the PHP side. Do you know how to destringify?
– Don P
Dec 25 '12 at 4:29
The only problem is JSON.stringify() gives me the output with escaped quotes. That makes it unable to be interpreted on the PHP side. Do you know how to destringify?
– Don P
Dec 25 '12 at 4:29
Here is the output [{"article":"Article","gender":"Gender","brand":"Brand"}]
– Don P
Dec 25 '12 at 4:29
Here is the output [{"article":"Article","gender":"Gender","brand":"Brand"}]
– Don P
Dec 25 '12 at 4:29
2
2
Did you use
json_decode
?– raina77ow
Dec 25 '12 at 8:13
Did you use
json_decode
?– raina77ow
Dec 25 '12 at 8:13
If you are using asp.net with automatic mapping or something similar, then this answer is what you need. stackoverflow.com/a/28434829/625581
– Martín Coll
Jul 10 '15 at 19:52
If you are using asp.net with automatic mapping or something similar, then this answer is what you need. stackoverflow.com/a/28434829/625581
– Martín Coll
Jul 10 '15 at 19:52
|
show 2 more comments
Writing as
var formData = new FormData;
var array = ['1', '2'];
for (var i = 0; i < array.length; i++) {
formData.append('array_php_side', array[i]);
}
you can receive just as normal array post/get by php.
How to collect this data on server side
– Rahul Matte
Apr 29 '16 at 9:19
This should be the correct answer I think
– zardilior
May 16 '18 at 1:42
Simple. Genius and should be the right answer
– user9168386
Aug 8 '18 at 12:33
add a comment |
Writing as
var formData = new FormData;
var array = ['1', '2'];
for (var i = 0; i < array.length; i++) {
formData.append('array_php_side', array[i]);
}
you can receive just as normal array post/get by php.
How to collect this data on server side
– Rahul Matte
Apr 29 '16 at 9:19
This should be the correct answer I think
– zardilior
May 16 '18 at 1:42
Simple. Genius and should be the right answer
– user9168386
Aug 8 '18 at 12:33
add a comment |
Writing as
var formData = new FormData;
var array = ['1', '2'];
for (var i = 0; i < array.length; i++) {
formData.append('array_php_side', array[i]);
}
you can receive just as normal array post/get by php.
Writing as
var formData = new FormData;
var array = ['1', '2'];
for (var i = 0; i < array.length; i++) {
formData.append('array_php_side', array[i]);
}
you can receive just as normal array post/get by php.
answered Jan 23 '16 at 3:46
YosukeYosuke
12112
12112
How to collect this data on server side
– Rahul Matte
Apr 29 '16 at 9:19
This should be the correct answer I think
– zardilior
May 16 '18 at 1:42
Simple. Genius and should be the right answer
– user9168386
Aug 8 '18 at 12:33
add a comment |
How to collect this data on server side
– Rahul Matte
Apr 29 '16 at 9:19
This should be the correct answer I think
– zardilior
May 16 '18 at 1:42
Simple. Genius and should be the right answer
– user9168386
Aug 8 '18 at 12:33
How to collect this data on server side
– Rahul Matte
Apr 29 '16 at 9:19
How to collect this data on server side
– Rahul Matte
Apr 29 '16 at 9:19
This should be the correct answer I think
– zardilior
May 16 '18 at 1:42
This should be the correct answer I think
– zardilior
May 16 '18 at 1:42
Simple. Genius and should be the right answer
– user9168386
Aug 8 '18 at 12:33
Simple. Genius and should be the right answer
– user9168386
Aug 8 '18 at 12:33
add a comment |
use "xxx"
as name of the field in formdata (you will get an array of - stringified objects - in you case)
so within your loop
$('.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);
...
Brilliant! My needs are similar to the OP's, but I want to fill theFormData
object with an array of file inputs. I am attempting to upload an arbitrary number of files, with AJAX, which the user specifies with standard form input elements. The server-side implementation requires all of the files to be nested under a single key, and this was the only way I was able to achieve that. There is absolutely no mention of this array-notation technique at developer.mozilla.org/en-US/docs/Web/API/FormData/append . I can't thank you enough, halfbit!
– Ben Johnson
Oct 7 '15 at 12:45
I added an example to the above-cited documentation that demonstrates this specific usage. The ability to include the square brackets is hugely useful when dealing with multi-file uploads because the resultant data structure is so much more conducive to looping. Thanks again!
– Ben Johnson
Oct 7 '15 at 13:38
add a comment |
use "xxx"
as name of the field in formdata (you will get an array of - stringified objects - in you case)
so within your loop
$('.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);
...
Brilliant! My needs are similar to the OP's, but I want to fill theFormData
object with an array of file inputs. I am attempting to upload an arbitrary number of files, with AJAX, which the user specifies with standard form input elements. The server-side implementation requires all of the files to be nested under a single key, and this was the only way I was able to achieve that. There is absolutely no mention of this array-notation technique at developer.mozilla.org/en-US/docs/Web/API/FormData/append . I can't thank you enough, halfbit!
– Ben Johnson
Oct 7 '15 at 12:45
I added an example to the above-cited documentation that demonstrates this specific usage. The ability to include the square brackets is hugely useful when dealing with multi-file uploads because the resultant data structure is so much more conducive to looping. Thanks again!
– Ben Johnson
Oct 7 '15 at 13:38
add a comment |
use "xxx"
as name of the field in formdata (you will get an array of - stringified objects - in you case)
so within your loop
$('.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);
...
use "xxx"
as name of the field in formdata (you will get an array of - stringified objects - in you case)
so within your loop
$('.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);
...
answered Aug 19 '14 at 15:41


halfbithalfbit
1,7671835
1,7671835
Brilliant! My needs are similar to the OP's, but I want to fill theFormData
object with an array of file inputs. I am attempting to upload an arbitrary number of files, with AJAX, which the user specifies with standard form input elements. The server-side implementation requires all of the files to be nested under a single key, and this was the only way I was able to achieve that. There is absolutely no mention of this array-notation technique at developer.mozilla.org/en-US/docs/Web/API/FormData/append . I can't thank you enough, halfbit!
– Ben Johnson
Oct 7 '15 at 12:45
I added an example to the above-cited documentation that demonstrates this specific usage. The ability to include the square brackets is hugely useful when dealing with multi-file uploads because the resultant data structure is so much more conducive to looping. Thanks again!
– Ben Johnson
Oct 7 '15 at 13:38
add a comment |
Brilliant! My needs are similar to the OP's, but I want to fill theFormData
object with an array of file inputs. I am attempting to upload an arbitrary number of files, with AJAX, which the user specifies with standard form input elements. The server-side implementation requires all of the files to be nested under a single key, and this was the only way I was able to achieve that. There is absolutely no mention of this array-notation technique at developer.mozilla.org/en-US/docs/Web/API/FormData/append . I can't thank you enough, halfbit!
– Ben Johnson
Oct 7 '15 at 12:45
I added an example to the above-cited documentation that demonstrates this specific usage. The ability to include the square brackets is hugely useful when dealing with multi-file uploads because the resultant data structure is so much more conducive to looping. Thanks again!
– Ben Johnson
Oct 7 '15 at 13:38
Brilliant! My needs are similar to the OP's, but I want to fill the
FormData
object with an array of file inputs. I am attempting to upload an arbitrary number of files, with AJAX, which the user specifies with standard form input elements. The server-side implementation requires all of the files to be nested under a single key, and this was the only way I was able to achieve that. There is absolutely no mention of this array-notation technique at developer.mozilla.org/en-US/docs/Web/API/FormData/append . I can't thank you enough, halfbit!– Ben Johnson
Oct 7 '15 at 12:45
Brilliant! My needs are similar to the OP's, but I want to fill the
FormData
object with an array of file inputs. I am attempting to upload an arbitrary number of files, with AJAX, which the user specifies with standard form input elements. The server-side implementation requires all of the files to be nested under a single key, and this was the only way I was able to achieve that. There is absolutely no mention of this array-notation technique at developer.mozilla.org/en-US/docs/Web/API/FormData/append . I can't thank you enough, halfbit!– Ben Johnson
Oct 7 '15 at 12:45
I added an example to the above-cited documentation that demonstrates this specific usage. The ability to include the square brackets is hugely useful when dealing with multi-file uploads because the resultant data structure is so much more conducive to looping. Thanks again!
– Ben Johnson
Oct 7 '15 at 13:38
I added an example to the above-cited documentation that demonstrates this specific usage. The ability to include the square brackets is hugely useful when dealing with multi-file uploads because the resultant data structure is so much more conducive to looping. Thanks again!
– Ben Johnson
Oct 7 '15 at 13:38
add a comment |
Function:
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;
}
Use:
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'
]
});
This is just great
– Vahid
Apr 21 '18 at 8:40
you are the best
– Ulterior
May 7 '18 at 11:04
add a comment |
Function:
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;
}
Use:
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'
]
});
This is just great
– Vahid
Apr 21 '18 at 8:40
you are the best
– Ulterior
May 7 '18 at 11:04
add a comment |
Function:
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;
}
Use:
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'
]
});
Function:
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;
}
Use:
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'
]
});
answered Sep 26 '17 at 13:21


DoglasDoglas
305316
305316
This is just great
– Vahid
Apr 21 '18 at 8:40
you are the best
– Ulterior
May 7 '18 at 11:04
add a comment |
This is just great
– Vahid
Apr 21 '18 at 8:40
you are the best
– Ulterior
May 7 '18 at 11:04
This is just great
– Vahid
Apr 21 '18 at 8:40
This is just great
– Vahid
Apr 21 '18 at 8:40
you are the best
– Ulterior
May 7 '18 at 11:04
you are the best
– Ulterior
May 7 '18 at 11:04
add a comment |
var formData = new FormData;
var alphaArray = ['A', 'B', 'C','D','E'];
for (var i = 0; i < alphaArray.length; i++) {
formData.append('listOfAlphabet', alphaArray [i]);
}
And In your request you will get array of alphabets.
add a comment |
var formData = new FormData;
var alphaArray = ['A', 'B', 'C','D','E'];
for (var i = 0; i < alphaArray.length; i++) {
formData.append('listOfAlphabet', alphaArray [i]);
}
And In your request you will get array of alphabets.
add a comment |
var formData = new FormData;
var alphaArray = ['A', 'B', 'C','D','E'];
for (var i = 0; i < alphaArray.length; i++) {
formData.append('listOfAlphabet', alphaArray [i]);
}
And In your request you will get array of alphabets.
var formData = new FormData;
var alphaArray = ['A', 'B', 'C','D','E'];
for (var i = 0; i < alphaArray.length; i++) {
formData.append('listOfAlphabet', alphaArray [i]);
}
And In your request you will get array of alphabets.
answered Jan 29 at 10:07


DevaDeva
1477
1477
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f14026539%2fcan-i-append-an-array-to-formdata-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
P,Q3nc7STbGwvbFYYEudBK 5F4oSb2S CRJ4KZ466VXRoGO,l,d,ZNQ 0mEFX1ckqOuQE
3
Why are you adding properties to an array? Use an object instead.
– Musa
Dec 24 '12 at 23:49
1
I suspect a PHP background. Arrays don't really work like this in Javascript.
– kapa
Dec 24 '12 at 23:52
That's exactly it :) I will use an object.
– Don P
Dec 25 '12 at 0:34
possible duplicate of appending array to FormData and send via AJAX
– Martín Coll
Jul 10 '15 at 19:53