FormData'ya dizi eklemek ve AJAX aracılığıyla göndermek

Dizi, metin alanları ve dosyalar içeren çok parçalı bir form göndermek için ajax kullanıyorum.

Her bir VAR'ı ana verilere ekliyorum

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

daha sonra ajax işlevini sql DB içinde saklamak üzere bir PHP dosyasına göndermek için kullanıyorum.

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

Ancak PHP tarafında, arrbir dizi olan değişken bir dizge olarak görünür.

Form verisi olarak ajax ile göndermediğimde, ancak basit $.POSTseçeneği kullandığımda, onu PHP tarafında bir dizi olarak alıyorum, ancak o zaman dosyaları da gönderemiyorum.

herhangi bir çözüm?

Birkaç seçeneğiniz var:

Bir JSON dizesine dönüştürün, ardından PHP'de ayrıştırın (önerilir)

JS

var json_arr = JSON.stringify(arr);

PHP

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

Veya @ Curios'un yöntemini kullanın

Bir dizi üzerinden gönderme FormData.

Önerilmez: Verileri ile serileştirin, ardından PHP'de seriyi kaldırın

JS

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

PHP

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

FormDataBu yolla da bir dizi gönderebilirsiniz :

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

Böylece arr[]basit bir HTML formu ile yaptığınız gibi yazabilirsiniz . PHP durumunda çalışmalıdır.

Bu makaleyi yararlı bulabilirsiniz: Bir sorgu dizesi içinde bir dizi nasıl geçirilir?

Bu eski bir soru, ancak son zamanlarda dosyalarla birlikte nesneler gönderirken bu sorunla karşılaştım. Nesneler ve diziler olan alt özelliklere sahip bir nesneyi gönderebilmem gerekiyordu.

Aşağıdaki işlev bir nesnenin içinden geçecek ve doğru formData nesnesini oluşturacaktır.

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

Bu, aşağıdaki json'u dönüştürecektir -

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

aşağıdaki FormData'ya

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

Typescript sürümü:

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

Kullanımı:

let formData = Utility.convertModelToFormData(model);

tüm tür girişlerini FormData'ya ekle

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

Yuvalanmış nesneleriniz ve dizileriniz varsa, FormData nesnesini doldurmanın en iyi yolu özyinelemeyi kullanmaktır.

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

Sonraki sürüm, basit değerler içeren model için geçerlidir:

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

@YackY cevabının kısa özyineleme versiyonuna göre:

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

Kullanım örneği:

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

Gönderilen veriler:

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