web-dev-qa-db-fra.com

Puis-je ajouter un tableau à 'formdata' en javascript?

J'utilise FormData pour télécharger des fichiers. Je veux aussi envoyer un tableau d'autres données.

Lorsque j'envoie uniquement l'image, cela fonctionne bien. Lorsque j'ajoute du texte à la formedata, cela fonctionne bien. Lorsque j'essaie d'attacher le tableau 'tags' ci-dessous, tout le reste marche bien mais aucun tableau n'est envoyé.

Des problèmes connus liés à FormData et aux tableaux d’ajout?

Instanciez formData

formdata = new FormData();

Le tableau que je crée. Console.log montre que tout fonctionne correctement.

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

Comment je l'envoie:

        // 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
16
Don P

Que dis-tu de ça?

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

... et, en conséquence, en utilisant json_decode sur le serveur pour le supprimer. Voir, la deuxième valeur de FormData.append peut être ...

un blob, un fichier ou une chaîne, si aucune des deux n'est convertie en un chaîne

D'après ce que je vois, votre tableau tags contient des objets (@Musa a raison, btw; transformer this_tag en tableau, puis lui affecter des propriétés de chaîne n'a aucun sens; utilisez plutôt un objet brut), donc la conversion native (avec toString()) ne être assez. JSON'ing devrait cependant recevoir les informations.

En tant que note de bas de page, je réécrirais la propriété en affectant un bloc à ceci:

tags.Push({article: article, gender: gender, brand: brand});
24
raina77ow

Écrit comme 

var formData = new FormData;
var array = ['1', '2'];
for (var i = 0; i < array.length; i++) {
    formData.append('array_php_side[]', array[i]);
}

vous pouvez recevoir comme tableau normal/obtenir par php.

10
Yosuke

utilisez "xxx[]" comme nom du champ dans formdata (vous obtiendrez un tableau - d'objets stringifiés - dans votre cas) 

donc dans votre boucle

$('.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);
...
9
halfbit

Une fonction:

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

Utilisation:

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

Vous pouvez seulement stringifier le tableau et l'ajouter. Envoie le tableau sous forme de tableau même s'il ne contient qu'un seul élément.

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

Et dans votre demande, vous obtiendrez un tableau d'alphabets.

0
Deva