Bisakah Anda memberi tahu saya apa yang salah dengan ini:

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

Keluaran saya terlihat seperti ini, saya tidak dapat menemukan pasangan "kunci" - "nilai" saya

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

Saya tidak mengerti! Kemarin itu bekerja dengan sangat baik, dan hari ini kepalaku membentur keyboard berkali-kali! Firefox, Chrome, keduanya sama: /

Baru di Chrome 50+ dan Firefox 39+ (resp. 44+):

• formdata.entries()(gabungkan dengan Array.from()untuk debugabilitas)
• formdata.get(key)
• dan metode yang lebih berguna

Jawaban asli:

Apa yang biasanya saya lakukan untuk 'men-debug' suatu FormDataobjek, hanya mengirimnya (di mana saja!) Dan memeriksa log browser (mis. Tab Jaringan devtools Chrome).

Anda tidak membutuhkan / kerangka Ajax yang sama. Anda tidak membutuhkan detail apapun. Kirimkan saja:

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

Mudah.

Anda mengatakan itu tidak berhasil. Apa yang Anda harapkan terjadi?

Tidak ada cara untuk mengeluarkan data dari suatu FormDataobjek; itu hanya dimaksudkan untuk Anda gunakan untuk mengirim data bersama dengan XMLHttpRequestobjek (untuk sendmetode).

Perbarui hampir lima tahun kemudian: Di beberapa browser yang lebih baru, ini tidak lagi benar dan Anda sekarang dapat melihat data yang diberikan FormDataselain hanya memasukkan data ke dalamnya. Lihat jawaban yang diterima untuk info lebih lanjut.

Anda mungkin mengalami masalah yang sama dengan yang saya alami pada awalnya. Saya mencoba menggunakan FormData untuk mengambil semua file masukan saya untuk mengunggah gambar, tetapi pada saat yang sama saya ingin menambahkan ID sesi ke informasi yang diteruskan ke server. Selama ini, saya pikir dengan menambahkan informasi, Anda akan dapat melihatnya di server dengan mengakses objek. Saya salah. Saat Anda menambahkan ke FormData, cara untuk memeriksa informasi yang ditambahkan di server adalah dengan $_POST['*your appended data*']kueri sederhana . seperti ini:

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

lalu di php:

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

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

Jika Anda berada di Chrome, Anda dapat memeriksa Post Data

Berikut adalah Cara memeriksa data Post

1. Pergi ke Tab Jaringan
2. Cari Tautan yang Anda kirimi Data Pos
3. Klik di atasnya
4. Di Header, Anda dapat memeriksa Request Payload untuk memeriksa data posting

Anda bisa melihatnya Anda perlu menggunakan console.log(formData.getAll('your key')); tonton https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll

data formulir tidak muncul di konsol browser web

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

coba cara ini akan terlihat

Dalam kasus saya di browser Edge:

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

beri saya kesalahan yang sama

Jadi saya tidak menggunakan FormDatadan saya hanya membuat objek secara manual

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]":"[email protected]" => "user":{"email":"[email protected]"}

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

Versi React

Pastikan untuk memiliki tajuk dengan '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
    });
  }

Melihat

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