FormData.append ("clave", "valor") no está funcionando

Question

¿Me puede decir cuál es incorrecto con esto:

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

Mi salida se parece a esto, no puedo encontrar mi "tecla" - "valor "par

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

¡No puedo entender! Ayer funcionó muy bien, ¡y hoy mi cabeza se estrelló en el teclado tantas veces! Firefox, Chrome, ambos son lo mismo:/

Answer 1

Nuevo en Chrome 50+ 39+ y Firefox (resp 44+.):

• formdata.entries() (combinar con Array.from() para debugability)
• formdata.get(key)
• y métodos más muy útiles

Original respuesta:

Lo que suelo hacer para 'depurar' un objeto FormData, es simplemente enviarlo (¡a cualquier lugar!) Y consultar los registros del navegador (ej. Pestaña de red de Chrome devtools).

No necesita un/el mismo marco Ajax. No necesitas ningún detalle Solo envíela:

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

Fácil.

Answer 2

Usted dice que no está funcionando. ¿Qué esperas que pase?

No hay forma de obtener los datos de un objeto FormData; solo está destinado para que lo use para enviar datos junto con un objeto XMLHttpRequest (para el método send).

Actualización casi cinco años después: en algunos navegadores más nuevos, esto ya no es cierto y ahora puede ver los datos proporcionados en FormData además de simplemente introducir datos en él. See the accepted answer para más información.

Answer 3

Es posible que haya tenido el mismo problema que estaba teniendo inicialmente. Intenté usar FormData para tomar todos mis archivos de entrada para cargar una imagen, pero al mismo tiempo quería agregar una ID de sesión a la información que se transmite al servidor. Todo este tiempo, pensé que al agregar la información, usted podría verla en el servidor al acceder al objeto. Estaba equivocado. Cuando se agrega a FormData, la forma de verificar la información adjunta en el servidor es mediante una simple consulta $_POST['*your appended data*'].de este modo:

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

entonces php:

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

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

Answer 4

Si se encuentra en Chrome puede comprobar los datos del anuncio

Aquí es cómo comprobar los datos del anuncio

1. Ir a la ficha de red
2. busque el enlace a la que le está enviando los datos del anuncio
3. Haga clic en él
4. en las cabeceras, se puede comprobar Solicitud de carga útil para comprobar los datos de envío

Answer 5

que pueda verlo necesita usar console.log(formData.getAll('your key')); mira el https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll