FormData.append( "ключ", "значение" ) не работает

Можете ли вы сказать мне, что с этим не так:

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, оба одинаковые:/

Ответы

Ответ 1

Новое в 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);

Легко.

Ответ 2

Вы говорите, что это не работает. Что вы ожидаете?

Нет способа получить данные из объекта FormData; он просто предназначен для использования для отправки данных вместе с объектом XMLHttpRequest (для метода send).

Обновление почти пять лет спустя: В некоторых новых браузеров, это уже не правда, и теперь вы можете увидеть данные, предоставленные FormData в дополнение к только начинку в него данные. См. принятый ответ для получения дополнительной информации.

Ответ 3

Возможно, у вас была такая же проблема, с которой я изначально был. Я пытался использовать 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){
    //...
}

Ответ 4

Если вы находитесь в Chrome, вы можете проверить Post Data​​p >

Вот как проверить данные Post

  • Перейдите на вкладку "Сеть".
  • Посмотрите на ссылку, по которой вы отправляете почтовые данные.
  • Нажмите на него
  • В заголовках вы можете проверить Request Payload для проверки данных post

Chrome's DevTools