Posso aggiungere un array a 'formdata' in javascript?

Question

Sto utilizzando FormData per caricare i file. Voglio anche inviare una serie di altri dati.

Quando invio solo l'immagine, funziona correttamente. Quando aggiungo del testo al formdata, funziona bene. Quando provo ad allegare l'array 'tags' qui sotto, tutto il resto funziona bene ma non viene inviato alcun array.

Eventuali problemi noti con FormData e gli array di aggiunta?

Instantiate formdata:

formdata = new FormData();

La matrice creo. Console.log mostra tutto ciò che funziona bene.

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

Come inviarlo:

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

ne dici di questo?

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

... e, di conseguenza, utilizzando json_decode sul server per Deparse esso. Vedere, il secondo valore di FormData.append può essere ...

un Blob, un file o una stringa, se nessuno dei due, il valore viene convertito in una stringa

Per come la vedo esso, la vostra matrice tags contiene oggetti (@Musa è giusta, btw, rendendo this_tag una matrice, quindi l'assegnazione di proprietà stringa non ha senso, utilizzare invece oggetto semplice), quindi la conversione nativa (con toString()) non sarà sufficiente. JSON'ing dovrebbe ottenere le informazioni attraverso, però.

Come sidenote, mi piacerebbe riscrivere la proprietà assegnando blocco proprio in questo:

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

Answer 2

uso "xxx[]" come nome del campo in formdata (si otterrà una serie di - oggetti stringata - in voi caso)

modo all'interno del tuo ciclo

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

Scrittura come

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

è possibile ricevere solo come normale array post/ottenere da php.

Answer 4

Funzione:

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

Usa:

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