FormData.append ("key", "value") tidak berfungsi


107

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: /

Jawaban:


127

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.


terima kasih - ini adalah cara cepat yang berguna untuk mendapatkan objek FormData dengan mengetiknya di konsol Chrome.
Dan Smart

Menurut metode Google formData ditambahkan di Chrome v50.
thdoan

Bagaimana Anda melihat log browser jika browser selulernya seperti Safari? Saya menggunakan objek FormData di aplikasi web yang ditujukan untuk seluler dan tidak tahu cara men-debugnya.
kiwicomb123

1
@ kiwicomb123 Formdata.entries()+ Array.from()+ alert()jika cukup modern, atau lihat debugging seluler
Rudie

jadi tidak ada tepi atau IE11?
SuperUberDuper

50

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.


20
Oke ... ini menyebalkan. Mengapa saya tidak dapat mencatat FormData di konsol saya? :-( Ini tidak masuk akal bagi saya, karena saya pikir itu adalah objek yang umum
netzaffin

12
@netzaffin: Baik Firebug dan inspektur Chrome memungkinkan Anda melihat parameter permintaan terkirim dalam permintaan XHR selama Anda membuka tab jaringan dan mulai masuk log, jadi Anda seharusnya bisa melakukannya. Anda juga bisa membuat objek pembungkus yang mencatat bidang dan menambahkannya ke FormData, lalu memeriksa nilainya (tidak lupa mengirim bagian dalam FormData alih-alih objek pembungkus).
Jesper

1
Setidaknya, dapatkah saya memeriksa apakah formdataobjek memiliki file di dalamnya?
MarceloBarbosa

1
@MarceloBarbosa: Sepertinya Anda tidak bisa mendapatkan informasi apa pun darinya. Anda hanya perlu menyimpan informasi ini sendiri.
Jesper

Seperti yang ditunjukkan oleh @Jesper Anda dapat memeriksa permintaan XHR yang dikirim di tab jaringan alat Pengembang, ada opsi Params di sana yang bahkan memungkinkan Anda melihat konten permintaan POST yang dikirim. Juga responnya.
Anirudh

23

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){
    //...
}

17

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

DevTools Chrome



5

data formulir tidak muncul di konsol browser web

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

coba cara ini akan terlihat


2

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]":"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();

2

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)} 
 />
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.