web-dev-qa-db-ja.com

javascriptの 'formdata'に配列を追加できますか？

FormDataを使用してファイルをアップロードしています。他のデータの配列も送信したいです。

画像だけを送信すると、正常に機能します。 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();
            }
        });
javascriptjqueryarraysmultipartform-data
22
Don P

これはどう？

_formdata.append('tags', JSON.stringify(tags));
_

...そして、それに応じて、サーバーで_json_decode_を使用してそれを解析します。参照してください、FormData.appendの2番目の値は...

blob、File、または文字列、どちらでもない場合、値は文字列に変換されます

私の見方では、あなたのtags配列にはオブジェクトが含まれています（@Musaは正しいです、btw; _this_tag_を配列にして、文字列プロパティを割り当てることは意味がありません;代わりにプレーンなオブジェクトを使用してください）ネイティブ変換（toString()を使用）では十分ではありません。ただし、JSON'ingは情報を取得する必要があります。

補足として、プロパティ割り当てブロックを次のように書き直します。

_tags.Push({article: article, gender: gender, brand: brand});
_
31
raina77ow

として書く

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と同じように受け取ることができます。

15
Yosuke

つかいます "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);
...
12
halfbit

関数：

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

これは、ファイル+テキスト+配列を送信したときに機能します。

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',
};
1
llioor

配列を文字列化して追加することしかできません。アイテムが1つしかない場合でも、配列を実際の配列として送信します。

const array = [ 1, 2 ];
let formData = new FormData();
formData.append("numbers", JSON.stringify(array));
0
Marko Rochevski
var formData = new FormData;
var alphaArray = ['A', 'B', 'C','D','E'];
for (var i = 0; i < alphaArray.length; i++) {
    formData.append('listOfAlphabet', alphaArray [i]);
}

そして、あなたのリクエストでは、アルファベットの配列を取得します。

0
Deva