Kann ich ein Array an 'Formdaten' in Javascript anhängen?

Question

Ich verwende FormData zum Hochladen von Dateien. Ich möchte auch eine Reihe anderer Daten senden.

Wenn ich nur das Bild senden, funktioniert es gut. Wenn ich Text an die Formdata angehängt habe, funktioniert es einwandfrei. Wenn ich versuche, das Array "Tags" unten anzuhängen, funktioniert alles andere gut, aber es wird kein Array gesendet.

Alle bekannten Probleme mit FormData und Anfügen von Arrays?

Instantiate Formdata:

formdata = new FormData();

Das Array I erstellen. Console.log zeigt an, dass alles gut funktioniert.

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

Wie ich es senden:

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

Answer 1

Wie wäre das?

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

... und dementsprechend es mit json_decode auf dem Server Deparse. Siehe, kann der zweite Wert von FormData.append sein ...

ein Blob, eine Datei oder einen String, wenn weder wird der Wert auf einen String umgewandelt

Die Art und Weise sehe ich es, Ihre tags Array enthält Objekte (@Musa ist richtig, BTW; machen this_tag ein Array, dann Zuweisung von String-Eigenschaften macht keinen Sinn; verwenden Sie stattdessen plain-Objekt), so native Konvertierung (mit toString()) wird nicht genug sein. JSON'ing sollte die Informationen jedoch erhalten.

Als Nebenbei bemerkt, würde ich die Eigenschaft umschreiben Block zuweisen dies nur in: - Zeichenfolgeobjekte -

tags.push({article: article, gender: gender, brand: brand}); 

Answer 2

Verwendung "xxx[]" als Namen des Feldes in Formulardaten (Sie werden eine Reihe von bekommen Sie Fall)

so innerhalb der Schleife

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

Answer 3

Schreiben als

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

können Sie wie normale Array Post/Get von PHP bekommen.

Answer 4

Funktion:

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

Verwendung:

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