48

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

画像だけを送信すると正常に動作します。フォームデータにテキストを追加すると、正常に機能します。以下の「tags」配列をアタッチしようとすると、他のすべては正常に機能しますが、配列は送信されません。

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

13 に答える 13

78

これはどう？

formdata.append('tags', JSON.stringify(tags));

...それに応じて、json_decodeサーバー上でそれを逆解析するために使用します。ほら、FormData.appendの2番目の値は...

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

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

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

tags.push({article: article, gender: gender, brand: brand});
于 2012-12-24T23:47:32.400 に答える
31

として書く

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

于 2016-01-23T03:46:38.133 に答える
16

formdataのフィールドの名前として使用"xxx[]"します（この場合、-文字列化されたオブジェクト-の配列を取得します）

だからあなたのループ内

$('.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);
...
于 2014-08-19T15:41:05.587 に答える
13

私たちはこのように簡単に行うことができます。

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"]

于 2020-08-13T13:39:22.413 に答える
6

働き：

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',
    ],
});
于 2017-09-26T13:21:21.877 に答える
3

単にあなたはこのようにすることができます：

var formData = new FormData();
formData.append('array[key1]', this.array.key1);
formData.append('array[key2]', this.array.key2);
于 2019-09-17T05:36:05.813 に答える
2 
var formData = new FormData;
var alphaArray = ['A', 'B', 'C','D','E'];
for (var i = 0; i < alphaArray.length; i++) {
    formData.append('listOfAlphabet', alphaArray [i]);
}

そしてあなたの要求であなたはアルファベットの配列を得るでしょう。

于 2019-01-29T10:07:23.967 に答える
2 
var formData = new FormData; var arr = ['item1', 'item2', 'item3'];

arr.forEach(item => {
    formData.append(
        "myFile",item
    ); });
于 2020-07-24T11:48:10.180 に答える
1

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

const array = [ 1, 2 ];
let formData = new FormData();
formData.append("numbers", JSON.stringify(array));
于 2019-02-21T11:16:05.917 に答える
1

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

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',
};
于 2019-05-27T10:20:39.613 に答える
1

これは私がそれをした方法です：

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を使用しています。

于 2021-03-31T03:46:03.697 に答える
0


以下のコードが機能しているので、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])
                }
            })
        }
于 2020-10-09T08:13:21.423 に答える
0

以下のように、フロントエンドで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:
   ...
   ...
于 2021-10-06T13:42:28.730 に答える