FormData.append ("Schlüssel", "Wert") funktioniert nicht

106

Können Sie mir sagen, was daran falsch ist:

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

Meine Ausgabe sieht so aus, ich kann mein Paar "Schlüssel" - "Wert" nicht finden

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

Ich kann nicht verstehen! Gestern hat es so gut funktioniert und heute hat mein Kopf so oft die Tastatur abgestürzt! Firefox, Chrome, beide gleich: /

Netzaffin
quelle

Antworten:

127

Neu in Chrome 50+ und Firefox 39+ (bzw. 44+):

  • formdata.entries()( Array.from()zur Debugbarkeit kombinieren mit )
  • formdata.get(key)
  • und sehr nützliche Methoden

Ursprüngliche Antwort:

Was ich normalerweise mache, um ein FormDataObjekt zu "debuggen" , ist es einfach zu senden (überall!) Und die Browserprotokolle zu überprüfen (z. B. die Registerkarte "Netzwerk" von Chrome devtools).

Sie benötigen nicht dasselbe Ajax-Framework. Sie brauchen keine Details. Schick es einfach:

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

Einfach.

Rudie
quelle
danke - dies war eine nützliche schnelle Möglichkeit, das FormData-Objekt durch Eingabe in die Chrome-Konsole abzurufen.
Dan Smart
Laut Google wurden formData-Methoden in Chrome v50 hinzugefügt.
Donnerstag,
Wie würden Sie die Browserprotokolle betrachten, wenn es sich um einen mobilen Browser wie Safari handelt? Ich verwende das FormData-Objekt in einer Web-App für Mobilgeräte und kann nicht herausfinden, wie es debuggt werden soll.
Kiwicomb123
1
@ kiwicomb123 Formdata.entries()+ Array.from()+ alert()wenn es modern genug, oder Blick in mobile Debugging
Rudie
also keine kante oder ie11?
SuperUberDuper
50

Sie sagen, es funktioniert nicht. Was erwarten Sie?

Es gibt keine Möglichkeit, die Daten aus einem FormDataObjekt herauszuholen . Es ist nur für Sie vorgesehen, um Daten zusammen mit einem XMLHttpRequestObjekt (für die sendMethode) zu senden .

Update fast fünf Jahre später: In einigen neueren Browsern ist dies nicht mehr der Fall, und Sie können jetzt die bereitgestellten Daten anzeigen und FormDatanur noch Daten hineinstecken. Weitere Informationen finden Sie in der akzeptierten Antwort .

Jesper
quelle
20
OK ... das ist scheiße. Warum kann ich die FormData nicht in meiner Konsole protokollieren? :-( Das macht für mich einfach keinen Sinn, da ich dachte, es sei ein häufiges Objekt
Netzaffin
12
@netzaffin: Sowohl in Firebug als auch im Chrome-Inspektor können Sie die Parameter für gesendete Anforderungen in einer XHR-Anforderung anzeigen, solange Sie die Registerkarte "Netzwerk" geöffnet und mit der Protokollierung begonnen haben. Sie sollten also in der Lage sein, damit auszukommen. Sie können auch ein Wrapper-Objekt erstellen, das die Felder protokolliert und an die FormData anhängt, und dies dann auf die Werte überprüfen (nicht zu vergessen, die inneren FormData anstelle des Wrapper-Objekts zu senden).
Jesper
1
Kann ich zumindest überprüfen, ob sich in einem formdataObjekt eine Datei befindet?
MarceloBarbosa
1
@MarceloBarbosa: Es scheint nicht, dass Sie irgendwelche Informationen daraus erhalten können. Sie müssen diese Informationen nur selbst aufbewahren.
Jesper
Wie von @Jesper hervorgehoben, können Sie die auf der Registerkarte "Netzwerk" der Entwicklertools gesendete XHR-Anforderung überprüfen. Dort gibt es die Option "Parameter", mit der Sie sogar den Inhalt der gesendeten POST-Anforderung anzeigen können. Auch die Antwort.
Anirudh
23

Möglicherweise hatten Sie das gleiche Problem, das ich ursprünglich hatte. Ich habe versucht, mit FormData alle meine Eingabedateien zum Hochladen eines Bildes abzurufen, wollte aber gleichzeitig eine Sitzungs-ID an die an den Server weitergegebenen Informationen anhängen. Während dieser ganzen Zeit, dachte ich, wenn Sie die Informationen anhängen, können Sie sie auf dem Server sehen, indem Sie auf das Objekt zugreifen. Ich lag falsch. Wenn Sie an FormData anhängen, können Sie die angehängten Informationen auf dem Server durch eine einfache $_POST['*your appended data*']Abfrage überprüfen . wie so:

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

dann auf php:

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

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

Wenn Sie in Chrome sind, können Sie die Post-Daten überprüfen

Hier erfahren Sie, wie Sie die Post-Daten überprüfen

  1. Gehen Sie zur Registerkarte Netzwerk
  2. Suchen Sie nach dem Link, an den Sie Post-Daten senden
  3. Klick es an
  4. In den Kopfzeilen können Sie Request Payload überprüfen, um die Post-Daten zu überprüfen

DevTools von Chrome

madhu131313
quelle
5

Formulardaten werden in der Webbrowser-Konsole nicht angezeigt

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

versuchen Sie es so, wie es sich zeigt

Dulanga Heshan
quelle
2

In meinem Fall im Edge-Browser:

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

gib mir den gleichen Fehler

Ich benutze es also nicht FormDataund erstelle einfach manuell ein Objekt

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();
Ramadanoski Julie
quelle
2

Version reagieren

Stellen Sie sicher, dass Sie einen Header mit haben '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
    });
  }

Aussicht

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