Posting array using formdata

Question

I am using the new HTML5 FormData-Object to post some values and an image via Ajax. It works fine so far. Now, I want to post an array using this object, but all I´ve got on server-side is "[object - object]". How can I post an array with formdata?

What I´ve got so far

var formData=new FormData();
formData.append('text', $('#text').attr('value'));
formData.append('headline',$('#headline').attr('value'));
formData.append('myarray',{key1: 'bla', key2: 'blubb'});

The last line doesn´t work. I send the request with this code

                 $.ajax({
                        url: 'xyz',
                        data: formData,
                        type: 'POST',
                        processData: false,
                        contentType: false,
                        success: function(data) { 
                            var decoded=$.parseJSON(data);
                            displaySuccess('Success', decoded.message); 
                        },error: function(data){
                            var decoded=$.parseJSON(data);
                            displayError('Error', decoded.message);
                        },complete: function(data){
                            $('#cursor').hide();
                            $("#submitbutton").removeAttr('disabled')
                        }
                    });

Thanks in advance.

Matt Stapleton · Accepted Answer · 2012-06-12 03:30:55Z

16

Using .append() on each element of the associative array might produce the results you're expecting.

In place of this line:

formData.append('myarray',{key1: 'bla', key2: 'blubb'});

You might try the following:

var myarray = {key1: 'bla', key2: 'blubb'};

jQuery.each(myarray, function(key, value) {
    formData.append('myarray['+key+']', value);
});

edited Jun 12, 2012 at 3:30

answered Jun 7, 2012 at 19:47

Matt Stapleton

1962 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rainer Sauerstoff · Accepted Answer · 2012-06-09 07:21:03Z

7

Thanks. I now came up with this solution:

                for (i = 0; i < social_networks.length; i++) {
                    formData.append("myarray["+i+"][mykey]",arr[i]['mykey']);
                    formData.append("myarray["+i+"][mykey2]",arr[i]['mykey2']);
                }

answered Jun 9, 2012 at 7:21

Rainer Sauerstoff

2791 gold badge3 silver badges8 bronze badges

1 Comment

Mawg Over a year ago

If you think that's the best answer, then you should accept it, to help others in future

Abhi · Accepted Answer · 2017-08-23 14:39:06Z

3

From your syntax, you appear to be trying to pass an object, not an array. I don't think you can pass objects through HTML form.

{ key1 : value1 , key2 : value2 }

vs

[ value1, value2 ]

This is a handy reference to general JS syntax

edited Aug 23, 2017 at 14:39

Abhi

4,2916 gold badges49 silver badges79 bronze badges

answered Jun 7, 2012 at 18:17

Bill

461 bronze badge

4 Comments

Dany Khalife Over a year ago

yea you can pass objects ! give it a try with jquery's data field. just created a complex object and passed it and it kept the same structure on serverside

codegrid Over a year ago

Hello @DanyKhalife how did you achieve that? I have similar problem.

Dany Khalife Over a year ago

@uikrosoft You can just pass the object as it is to jQuery. Let's say you have an object var myData = {a: 1, b: 2, c: [3,4,5]}; the jQuery call will be something like

$.ajax({ url: '/myscript.php', method: 'POST', data: myData, dataType: 'json', success: function(response){ console.log(response); } })

coderwill Over a year ago

hi @Bill i m also send array formData.append("ProIList", P.ProIList); in this but i don't getting server side this array list so can you know how can getting this list??

codegrid · Accepted Answer · 2015-03-14 05:01:57Z

2

Try this. It worked for me.

var files = $scope.myFile;
        var fd = new FormData();
        fd.append("file", files[0]);
        fd.append("assignment", JSON.stringify({ classAssignment: $scope.editItem }));

answered Mar 14, 2015 at 5:01

codegrid

1,0073 gold badges15 silver badges35 bronze badges

Comments

Sham Dhiman · Accepted Answer · 2019-01-08 12:29:36Z

my arrary list is like this

billlists = [{ Color: "White"Quantity: "1"Shape: "2.0"SizeNo1: "1"SizeNo2: "1"StoneColorCost: "20000"StoneColorWT: "0.006"Type: "1"__proto__: Object1: Color: "White"Quantity: "1"Shape: "2.0"SizeNo1: "0.5"SizeNo2: "0.7"StoneColorCost: "6"StoneColorWT: "0.005"Type: "1"},

{ Color: "White"Quantity: "1"Shape: "2.0"SizeNo1: "1"SizeNo2: "1"StoneColorCost: "20000"StoneColorWT: "0.006"Type: "1"__proto__: Object1: Color: "White"Quantity: "1"Shape: "2.0"SizeNo1: "0.5"SizeNo2: "0.7"StoneColorCost: "6"StoneColorWT: "0.005"Type: "1"}]

This code used to format data like key-value pairs

function serializeData(name, arr)
 {
   var a = [];
    for (var i = 0; i < arr.length; i++) 
        {
      for (var key in arr[i]) 
    {
 a.push({ name: name + '[' + i + '].' + key + '', value: arr[i][key] });
     }
        }
         return a;
                  }

  var mydata = serializeData('billlist', billlists);

  $.each(mydata, function (key, input) {
       fd.append(input.name, input.value);
            });

This is output of serialized Data

0: {name: "billlist[0].Type", value: "1"}
1: {name: "billlist[0].Color", value: "White"}
2: {name: "billlist[0].Shape", value: "2.0"}
3: {name: "billlist[0].SizeNo1", value: "1"}
4: {name: "billlist[0].SizeNo2", value: "1"}
5: {name: "billlist[0].Quantity", value: "1"}
6: {name: "billlist[0].StoneColorWT", value: "0.006"}
7: {name: "billlist[0].StoneColorCost", value: "20000"}
8: {name: "billlist[1].Type", value: "1"}
9: {name: "billlist[1].Color", value: "White"}
10: {name: "billlist[1].Shape", value: "2.0"}
11: {name: "billlist[1].SizeNo1", value: "0.5"}
12: {name: "billlist[1].SizeNo2", value: "0.7"}
13: {name: "billlist[1].Quantity", value: "1"}
14: {name: "billlist[1].StoneColorWT", value: "0.005"}
15: {name: "billlist[1].StoneColorCost", value: "6"}

Its working for me

But in other post i seen data is pass like

 {name: "billlist[0][Type]", value: "1"}

Way it not working for me

Collectives™ on Stack Overflow

Posting array using formdata

5 Answers 5

Comments

1 Comment

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related