javascript - files - formdata w3schools

FormData.append("clave", "valor") no funciona

Question

¿Puedes decirme qué está mal con esto?

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

Mi salida se ve así, no puedo encontrar mi par de "clave" - ​​"valor"

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

Answer 1

Dices 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 de send ).

Actualice casi cinco años después: en algunos navegadores más nuevos, esto ya no es cierto y ahora puede ver los datos proporcionados a FormData además de simplemente incluir datos en él. Ver la respuesta aceptada para más información.

Answer 2

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*''] . al igual que:

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

luego en php:

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

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

Answer 3

Si estás en Chrome, puedes consultar los Datos de publicación

Aquí está cómo verificar los datos de la publicación

1. Ir a la pestaña de red
2. Busque el enlace al que está enviando datos de publicación
3. Haz click en eso
4. En los encabezados, puede verificar la carga de solicitud para verificar los datos de la publicación

Answer 4

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

Answer 5

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

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

Respuesta original:

Lo que suelo hacer para ''depurar'' un objeto FormData , es simplemente enviarlo (¡a cualquier lugar!) Y verificar los registros del navegador (por ejemplo, la pestaña Red de Chrome devtools).

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

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

Fácil.