Чи можете ви сказати мені, що з цим не так:

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

Мій вихід виглядає так, я не можу знайти свою пару "ключ" - "значення"

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

Я не можу зрозуміти! Вчора це так добре працювало, а сьогодні моя голова стільки разів розбила клавіатуру! Firefox, Chrome, те саме: /

Нове в Chrome 50+ та Firefox 39+ (відповідно 44+):

• formdata.entries()(комбінувати з Array.from()для налагодження)
• formdata.get(key)
• і більше дуже корисних методів

Оригінальна відповідь:

Що я зазвичай роблю для «налагодження» FormDataоб’єкта, це просто надіслати його (де завгодно!) Та перевірити журнали браузера (наприклад, вкладка «Мережа Chrome devtools»).

Вам не потрібна однакова рамка Ajax. Ніяких деталей вам не потрібно. Просто надішліть його:

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

Легко.

Ви кажете, що це не працює. Що ви очікуєте, що це станеться?

Немає можливості витягнути дані з FormDataоб'єкта; він призначений для того, щоб ви використовували для надсилання даних разом з XMLHttpRequestоб'єктом (для sendметоду).

Оновлення майже через п’ять років: У деяких новіших браузерах це вже не відповідає дійсності, і тепер ви можете бачити дані, що надаються, FormDataкрім того, щоб просто вставити в них дані. Див. Прийняту відповідь для отримання додаткової інформації.

У вас, можливо, була та сама проблема, з якою у мене були спочатку. Я намагався використовувати FormData, щоб схопити всі мої вхідні файли для завантаження зображення, але в той же час я хотів додати ідентифікатор сеансу до інформації, переданої разом із сервером. Весь цей час, я думав, додавши інформацію, ви зможете побачити її на сервері, отримавши доступ до об’єкта. Я був неправий. Коли ви додаєте до FormData, спосіб перевірити додану інформацію на сервері - це простий $_POST['*your appended data*']запит. так:

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

потім на php:

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

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

Якщо ви перебуваєте в Chrome, ви можете перевірити публікацію даних

Ось як перевірити дані Посту

1. Перейдіть на вкладку Мережа
2. Шукайте посилання, на яке ви надсилаєте поштові дані
3. Натисніть на нього
4. У заголовках ви можете перевірити Запит корисного навантаження, щоб перевірити дані публікації

ви можете побачити, що вам потрібно використовувати console.log(formData.getAll('your key')); дивіться https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll

Дані форми не відображаються в консолі веб-браузера

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

спробуйте таким чином, це покаже

У моєму випадку в браузері Edge:

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

дай мені ту саму помилку

Тому я не використовую, FormDataі я просто вручну будую об'єкт

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

Реактивна версія

Обов’язково маєте заголовок '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
    });
  }

Вид

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