Bana bunun nesi yanlış olduğunu söyleyebilir misin:

var formdata = new FormData();
formdata.append("key", "value");
console.log(formdata);

Çıktım şöyle görünüyor, "anahtar" - "değer" çiftimi bulamıyorum

FormData
*__proto__: FormData
**append: function append() { [native code] }
***arguments: null
***caller: null
***length: 0
***name: "append"
***prototype: append
***__proto__: function Empty() {}
*constructor: function FormData() { [native code] }
**arguments: null
**caller: null
**length: 0
**name: "FormData"
**prototype: FormData
**toString: function toString() { [native code] }
*__proto__: Object
**__proto__: Object
**__defineGetter__: function __defineGetter__() { [native code] }
**__defineSetter__: function __defineSetter__() { [native code] }
**__lookupGetter__: function __lookupGetter__() { [native code] }
**__lookupSetter__: function __lookupSetter__() { [native code] }
**constructor: function Object() { [native code] }
**hasOwnProperty: function hasOwnProperty() { [native code] }
**isPrototypeOf: function isPrototypeOf() { [native code] }
**propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
**toLocaleString: function toLocaleString() { [native code] }
**toString: function toString() { [native code] }
**valueOf: function valueOf() { [native code] }

Anlayamıyorum! Dün çok iyi çalıştı ve bugün kafam klavyeyi defalarca çarptı! Firefox, Chrome, ikisi de aynı: /

Chrome 50+ ve Firefox 39+ (sırasıyla 44+) sürümlerindeki yenilikler:

• formdata.entries()( Array.from()hata ayıklama için ile birleştirin )
• formdata.get(key)
• ve daha çok kullanışlı yöntemler

Orijinal cevap:

Genellikle bir FormDatanesnede 'hata ayıklamak' için yaptığım şey , onu göndermek (herhangi bir yerde!) Ve tarayıcı günlüklerini kontrol etmektir (örn. Chrome devtools'un Ağ sekmesi).

Aynı Ajax çerçevesine ihtiyacınız yok. Herhangi bir ayrıntıya ihtiyacınız yok. Sadece onu gönder:

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(data);

Kolay.

Çalışmadığını söylüyorsun. Ne olmasını bekliyorsun

Verileri bir FormDatanesneden almanın bir yolu yoktur ; sadece bir XMLHttpRequestnesneyle birlikte veri göndermek için kullanmanız amaçlanmıştır ( sendyöntem için).

Neredeyse beş yıl sonra güncelleme: Bazı yeni tarayıcılarda, bu artık doğru değildir ve artık FormDatayalnızca verileri doldurmanın yanı sıra sağlanan verileri de görebilirsiniz. Daha fazla bilgi için kabul edilen cevaba bakın .

Başlangıçta benim yaşadığım problemin aynısını yaşıyor olabilirsin. Bir görüntüyü yüklemek için tüm girdi dosyalarımı almak için FormData'yı kullanmaya çalışıyordum, ancak aynı zamanda sunucuya iletilen bilgilere bir oturum kimliği eklemek istedim. Bunca zaman, bilgiyi ekleyerek nesneye erişerek sunucuda görebileceğinizi düşündüm. Ben hatalıydım. FormData'ya eklediğinizde, sunucuda eklenen bilgileri kontrol etmenin yolu basit bir $_POST['*your appended data*']sorgudur. böyle:

js:

$('form').submit(function(){
    var sessionID = 8;
    var formData = new FormData(this);
    formData.append('id', sessionID);

    $.ajax({
        url: "yoururl.php",
        data: formData,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data){
            alert(data);
        }
    });
});

sonra php'de:

$sessionID = $_POST['id'];
$files = $_FILES['image'];

$foreach ($files as $key=>val){
    //...
}

Chrome'daysanız, Gönderi Verilerini kontrol edebilirsiniz.

Gönderi verilerini nasıl kontrol edeceğiniz aşağıda açıklanmıştır

1. Ağ Sekmesine Git
2. Gönderi Verilerini gönderdiğiniz Bağlantıyı arayın
3. Üstüne tıkla
4. Başlıklarda, gönderi verilerini kontrol etmek için Yük İsteğini kontrol edebilirsiniz

kullanmanız gerektiğini görebilirsiniz console.log(formData.getAll('your key')); https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll sayfasını izleyin

form verileri web tarayıcısı konsolunda görünmüyor

for (var data of formData) {
  console.log(data);
}

bu şekilde dene gösterecek

Edge tarayıcısındaki durumumda:

  const formData = new FormData(this.form);
  for (const [key, value] of formData.entries()) {
      formObject[key] = value;
  }

bana aynı hatayı ver

Bu yüzden kullanmıyorum FormDatave sadece manuel olarak bir nesne oluşturuyorum

import React from 'react';    
import formDataToObject from 'form-data-to-object';

  ...

let formObject = {};

// EDGE compatibility -  replace FormData by
for (let i = 0; i < this.form.length; i++) {
  if (this.form[i].name) {
    formObject[this.form[i].name] = this.form[i].value;
  }
}

const data = formDataToObject.toObj(formObject): // convert "user[email]":"customer@mail.com" => "user":{"email":"customer@mail.com"}

const orderRes = await fetch(`/api/orders`, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      });

const order = await orderRes.json();

React Sürümü

Bir başlığa sahip olduğunuzdan emin olun 'content-type': 'multipart/form-data'

_handleSubmit(e) {
    e.preventDefault();
    const formData = new FormData();
          formData.append('file', this.state.file);
    const config = {
      headers: {
        'content-type': 'multipart/form-data'
      }
    }

     axios.post("/upload", formData, config)
         .then((resp) => {
             console.log(resp)
         }).catch((error) => {
    })
  }

  _handleImageChange(e) {
    e.preventDefault();
    let file = e.target.files[0];
    this.setState({
      file: file
    });
  }

Görünüm

  #html
 <input className="form-control"
    type="file" 
    onChange={(e)=>this._handleImageChange(e)} 
 />