agregar matriz a FormData y enviar a través de AJAX

Estoy usando ajax para enviar un formulario de varias partes con una matriz, campos de texto y archivos.

Agrego cada VAR a los datos principales como tal.

var attachments = document.getElementById('files'); 
var data= new FormData();

for (i=0; i< attachments.files.length; i++){
    data.append('file', attachments.files[i]);
    console.log(attachments.files[i]);

    data.append ('headline', headline);
    data.append ('article', article);
    data.append ('arr', arr);
    data.append ('tag', tag);

luego uso la función ajax para enviarlo a un archivo PHP para almacenarlo dentro de SQL DB.

$.ajax({    
    type: "post",
    url: 'php/submittionform.php',
    cache: false,
    processData: false,
    contentType: false,
    data: data,
    success: function(request) {$('#box').html(request); }
})

Pero en el lado de PHP, la arrvariable, que es una matriz, aparece como una cadena.

Cuando no lo envío con ajax como datos de formulario pero uso la $.POSTopción simple, lo obtengo como una matriz en el lado de PHP, pero tampoco puedo enviar los archivos.

¿alguna solución?

Apr 19 '13 18:04 shultz

También puedes enviar una matriz de FormDataesta manera:

var formData = new FormData;
var arr = ['this', 'is', 'an', 'array'];

for (var i = 0; i < arr.length; i++) {
  formData.append('arr[]', arr[i]);
}

console.log(...formData);

Expandir fragmento

Así podrás escribir arr[]de la misma manera que lo haces con un simple formulario HTML. En el caso de PHP debería funcionar.

Puede que este artículo le resulte útil: ¿ Cómo pasar una matriz dentro de una cadena de consulta?

Feb 10 '2015 14:02 Oleg

Tienes varias opciones:

Conviértalo en una cadena JSON y luego analícelo en PHP (recomendado)

js

var json_arr = JSON.stringify(arr);

PHP

$arr = json_decode($_POST['arr']);

O usa el método de @Curios

Envío de una matriz vía FormData.

No recomendado: serializar los datos y luego deserializarlos en PHP

js

// Use <#> or any other delimiter you want
var serial_arr = arr.join("<#>");

PHP

$arr = explode("<#>", $_POST['arr']);

Apr 19 '2013 11:04 Richard de Wit

Esta es una pregunta antigua, pero recientemente me encontré con este problema al publicar objetos junto con archivos. Necesitaba poder publicar un objeto, con propiedades secundarias que también fueran objetos y matrices.

La siguiente función recorrerá un objeto y creará el objeto formData correcto.

// formData - instance of FormData object
// data - object to post
function getFormData(formData, data, previousKey) {
  if (data instanceof Object) {
    Object.keys(data).forEach(key => {
      const value = data[key];
      if (value instanceof Object && !Array.isArray(value)) {
        return this.getFormData(formData, value, key);
      }
      if (previousKey) {
        key = `${previousKey}[${key}]`;
      }
      if (Array.isArray(value)) {
        value.forEach(val => {
          formData.append(`${key}[]`, val);
        });
      } else {
        formData.append(key, value);
      }
    });
  }
}

Esto convertirá el siguiente json:

{
  name: 'starwars',
  year: 1977,
  characters: {
    good: ['luke', 'leia'],
    bad: ['vader'],
  },
}

en el siguiente FormData

 name, starwars
 year, 1977
 characters[good][], luke
 characters[good][], leia
 characters[bad][], vader

Mar 29 '2017 18:03 VtoCorleone

agregar todas las entradas de tipo a FormData

const formData = new FormData();
for (let key in form) {
    Array.isArray(form[key])
        ? form[key].forEach(value => formData.append(key + '[]', value))
        : formData.append(key, form[key]) ;
}

Oct 25 '2018 09:10 HamidNE