Converter FormData HTML5 em JSON

Converter as entradas de um objeto FormData HTML5 em JSON é uma tarefa comum no desenvolvimento web. Embora existam várias abordagens para conseguir isso, o método mais direto e eficiente é usar a função forEach() diretamente no objeto FormData.

var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);

Essa abordagem percorre cada par de valores-chave no objeto FormData e os adiciona a um novo objeto JavaScript. O método JSON.stringify() é então usado para converter o objeto em uma string JSON.

Atualização: ES6 Arrow Functions

Para aqueles que preferem a sintaxe ES6, o a mesma solução pode ser escrita usando funções de seta:

var object = {};
formData.forEach((value, key) => object[key] = value);
var json = JSON.stringify(object);

Atualização 2: suporte para elementos de formulário com vários valores

Para oferecer suporte a elementos de formulário com vários valores, como seleção múltipla listas, o seguinte código pode ser usado:

var object = {};
formData.forEach((value, key) => {
    if(!Reflect.has(object, key)){
        object[key] = value;
        return;
    }
    if(!Array.isArray(object[key])){
        object[key] = [object[key]];    
    }
    object[key].push(value);
});
var json = JSON.stringify(object);

Atualização 3: envio direto via XMLHttpRequest e Fetch API

O envio de FormData diretamente para um servidor sem conversão é possível usando o Objeto XMLHttpRequest ou API de busca:

var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/submitform.php');
request.send(formData);

fetch('http://example.com/submitform.php', {
  method: 'POST',
  body: formData
}).then((response) => { 
  // do something with response here... 
});

Atualização 4: serialização JSON de objetos complexos

A lógica de serialização personalizada pode ser definida para objetos complexos por meio do método toJSON().