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

问题:

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();             }         }); 

回答1:

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}); 

回答2:

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); ... 

回答3:

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.

回答4:

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'     ] }); 

文章来源: Can I append an array to 'formdata' in javascript?