menambahkan array ke FormData dan mengirim melalui AJAX

Saya menggunakan ajax untuk mengirimkan formulir multi bagian dengan larik, bidang teks, dan file.

Saya menambahkan setiap VAR ke data utama seperti itu

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

kemudian saya menggunakan fungsi ajax untuk mengirimkannya ke file PHP untuk disimpan di dalam sql DB.

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

Namun di sisi PHP, arrvariabel berupa array muncul sebagai string.

Ketika saya tidak mengirimnya dengan ajax sebagai data Formulir tetapi menggunakan $.POSTopsi sederhana, saya mendapatkannya sebagai array di sisi PHP, tetapi kemudian saya tidak dapat mengirim file juga.

ada solusi?

Anda memiliki beberapa opsi:

Konversikan menjadi string JSON, lalu parse dalam PHP (disarankan)

JS

var json_arr = JSON.stringify(arr);

PHP

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

Atau gunakan metode @ Curios

Mengirim array melalui FormData.

Tidak disarankan: Menyerialkan data dengan, kemudian deserialisasi dalam PHP

JS

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

PHP

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

Anda juga dapat mengirim array melalui FormDatacara ini:

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

Jadi Anda bisa menulis arr[]dengan cara yang sama seperti Anda melakukannya dengan formulir HTML sederhana. Dalam kasus PHP itu harus berfungsi.

Anda mungkin menemukan artikel ini berguna: Bagaimana cara melewatkan array dalam string kueri?

Ini adalah pertanyaan lama tetapi saya mengalami masalah ini dengan memposting objek bersama dengan file baru-baru ini. Saya harus bisa memposting sebuah objek, dengan properti anak yang merupakan objek dan array juga.

Fungsi di bawah ini akan berjalan melalui sebuah objek dan membuat objek formData yang benar.

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

Ini akan mengubah json berikut -

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

ke dalam FormData berikut

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

Versi naskah ketikan:

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

Menggunakan:

let formData = Utility.convertModelToFormData(model);

tambahkan semua jenis input ke 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]) ;
}

Jika Anda memiliki objek dan larik bersarang, cara terbaik untuk mengisi objek FormData adalah menggunakan rekursi.

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

Versi berikutnya valid untuk model yang berisi larik nilai sederhana:

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

Berdasarkan jawaban @YackY versi rekursi yang lebih pendek:

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

Contoh penggunaan:

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

Data terkirim:

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