Array an FormData anhängen und über AJAX senden

Ich verwende Ajax, um ein mehrteiliges Formular mit Array, Textfeldern und Dateien einzureichen.

Ich hänge jeden VAR so an die Hauptdaten an

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

dann benutze ich die Ajax-Funktion, um es an eine PHP-Datei zu senden, um es in der SQL-Datenbank zu speichern.

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

Auf der PHP-Seite wird die arrVariable, bei der es sich um ein Array handelt, als Zeichenfolge angezeigt.

Wenn ich es nicht mit Ajax als Formulardaten sende, sondern die einfache $.POSTOption verwende, bekomme ich es als Array auf der PHP-Seite, aber dann kann ich die Dateien auch nicht senden.

irgendwelche Lösungen?

Sie haben mehrere Möglichkeiten:

Konvertieren Sie es in eine JSON-Zeichenfolge und analysieren Sie es dann in PHP (empfohlen).

JS

var json_arr = JSON.stringify(arr);

PHP

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

Oder verwenden Sie die Methode von @ Curios

Senden eines Arrays über FormData.

Nicht empfohlen: Serialisieren Sie die Daten mit und deserialisieren Sie sie dann in PHP

JS

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

PHP

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

Sie können ein Array auch folgendermaßen senden FormData:

var formData = new FormData;
var arr = ['this', 'is', 'an', 'array'];
for (var i = 0; i < arr.length; i++) {
    formData.append('arr[]', arr[i]);
}

Sie können also arr[]genauso schreiben wie mit einem einfachen HTML-Formular. Im Falle von PHP sollte es funktionieren.

Dieser Artikel ist möglicherweise hilfreich: Wie übergebe ich ein Array innerhalb einer Abfragezeichenfolge?

Dies ist eine alte Frage, aber ich bin kürzlich auf dieses Problem gestoßen, als ich Objekte zusammen mit Dateien gepostet habe. Ich musste in der Lage sein, ein Objekt mit untergeordneten Eigenschaften zu veröffentlichen, die auch Objekte und Arrays waren.

Die folgende Funktion geht durch ein Objekt und erstellt das richtige formData-Objekt.

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

Dies konvertiert den folgenden json -

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

in die folgenden FormData

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

Typoskript-Version:

export class Utility {      
    public static convertModelToFormData(model: any, form: FormData = null, namespace = ''): FormData {
        let formData = form || new FormData();
        let formKey;

        for (let propertyName in model) {
            if (!model.hasOwnProperty(propertyName) || !model[propertyName]) continue;
            let formKey = namespace ? `${namespace}[${propertyName}]` : propertyName;
            if (model[propertyName] instanceof Date)
                formData.append(formKey, model[propertyName].toISOString());
            else if (model[propertyName] instanceof Array) {
                model[propertyName].forEach((element, index) => {
                    const tempFormKey = `${formKey}[${index}]`;
                    this.convertModelToFormData(element, formData, tempFormKey);
                });
            }
            else if (typeof model[propertyName] === 'object' && !(model[propertyName] instanceof File))
                this.convertModelToFormData(model[propertyName], formData, formKey);
            else
                formData.append(formKey, model[propertyName].toString());
        }
        return formData;
    }
}

Verwenden von:

let formData = Utility.convertModelToFormData(model);

Fügen Sie FormData alle Typeneingaben hinzu

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

Wenn Sie verschachtelte Objekte und Arrays haben, können Sie das FormData-Objekt am besten mithilfe der Rekursion füllen.

function createFormData(formData, data, key) {
    if ( ( typeof data === 'object' && data !== null ) || Array.isArray(data) ) {
        for ( let i in data ) {
            if ( ( typeof data[i] === 'object' && data[i] !== null ) || Array.isArray(data[i]) ) {
                createFormData(formData, data[i], key + '[' + i + ']');
            } else {
                formData.append(key + '[' + i + ']', data[i]);
            }
        }
    } else {
        formData.append(key, data);
    }
}

Nächste Version gültig für Modell mit Arays einfacher Werte:

function convertModelToFormData(val, formData = new FormData(), namespace = '') {
    if((typeof val !== 'undefined') && (val !== null)) {
        if(val instanceof Date) {
            formData.append(namespace, val.toISOString());
        } else if(val instanceof Array) {
            for(let element of val) {
                convertModelToFormData(element, formData, namespace + '[]');
            }
        } else if(typeof val === 'object' && !(val instanceof File)) {
            for (let propertyName in val) {
                if(val.hasOwnProperty(propertyName)) {
                    convertModelToFormData(val[propertyName], formData, namespace ? namespace + '[' + propertyName + ']' : propertyName);
                }
            }
        } else {
            formData.append(namespace, val.toString());
        }
    }
    return formData;
}

Basierend auf @YackY Antwort kürzere Rekursionsversion:

function createFormData(formData, key, data) {
    if (data === Object(data) || Array.isArray(data)) {
        for (var i in data) {
            createFormData(formData, key + '[' + i + ']', data[i]);
        }
    } else {
        formData.append(key, data);
    }
}

Anwendungsbeispiel:

var data = {a: '1', b: 2, c: {d: '3'}};
var formData = new FormData();
createFormData(formData, 'data', data);

Gesendete Daten:

data[a]=1&
data[b]=2&
data[c][d]=3