A interface JavaScript FormData fornece um método para criar um objeto com pares de valores-chave. Esses objetos podem ser compartilhados pela Internet usando o método fetch() ou XMLHttpRequest.send(). Ele usa a funcionalidade do elemento de formulário HTML. Ele usará o mesmo formato que será usado por um formulário do tipo de codificação definido como 'multipart/form-data'.

Também podemos passá-lo diretamente para o construtor URLSearchParams para obter os parâmetros de consulta, assim como no comportamento da tag no envio da solicitação GET.

Geralmente, é usado para criar um conjunto de dados para enviá-lo ao servidor. O objeto FormData é um array de arrays que contém um array para cada elemento.

Essas matrizes têm os três valores a seguir:

nome: Ele contém o nome do campo.

valor: Ele contém o valor do campo, que pode ser um objeto String ou Blob.

nome do arquivo: Ele contém o nome do arquivo, que é uma string que contém o nome. O nome será salvo no servidor quando um objeto blob for passado como 2^eparâmetro.

Por que FormData?

Os elementos do formulário HTML são desenvolvidos de forma a capturar automaticamente seus campos e valores. Nesses cenários, a interface FormData nos ajuda a enviar formulários HTML com ou sem arquivos e campos adicionais.

É um objeto que contém os dados do formulário inseridos pelo usuário.

Abaixo está o construtor de dados do formulário:

 let formData = new FormData([form]); 

Os objetos FormData podem ser aceitos como um corpo pelos métodos de rede, como fetch. Ele é codificado e enviado com o Content-Type: multipart/form-data por padrão.

O servidor irá considerá-lo como um envio regular de formulário.

Vamos entender um exemplo simples de envio do FormData.

Enviando um FormData Básico

No formulário abaixo, estamos enviando um FormData simples para o servidor.

Índice.html:

 formElem.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); Console.log(result); }; 

No exemplo acima, não configuramos nenhuma API de back-end para enviar os dados porque isso está além do escopo deste tutorial. Porém, podemos verificar a carga útil na guia rede e entender como funciona a interface FormData.

Portanto, se observarmos a solicitação de rede na ferramenta do desenvolvedor, ela mostrará a carga útil abaixo:

Na solicitação de rede acima, os dados do formulário são enviados pela rede usando o objeto FormData. De outras maneiras, precisamos especificar vários métodos para obter os dados do formulário.

Assim, utilizando a interface FormData, podemos facilmente enviar o formData para o servidor. É apenas um código de uma linha.

Construtor FormData

O construtor FormData() é usado para criar um novo objeto FormData. Pode ser usado das seguintes maneiras:

 new FormData() new FormData(form) new FormData(form, submitter) 

Parâmetros:

formulário (opcional):

É um elemento HTML; se for especificado, o objeto FormData será preenchido com as chaves/valores atuais do formulário. Ele usa as propriedades do atributo name de cada elemento para as chaves e seus valores enviados para os valores. Ele também codifica o conteúdo de entrada do arquivo.

remetente (opcional):

O botão do remetente é um elemento de um formulário. Se o elemento remetente tiver uma propriedade de atributo name, seus dados serão incluídos no objeto FormData.

ovos de páscoa no android

Métodos FormData

FormData fornece vários métodos que podem ser úteis para acessar e modificar os dados dos campos do formulário.

Em menos casos, poderemos precisar alterar os dados do formulário antes de enviá-los ao servidor. Esses métodos podem ser úteis nesses casos.

A seguir estão alguns métodos formData úteis:

formData.append(nome, valor)

Ele pega o nome e o valor de dois argumentos e adiciona um objeto de campo de formulário com o nome e o valor fornecidos.

formData.append(nome, blob, nome do arquivo)

Leva os argumentos name, blob e fileName. Ele adiciona um campo para formar objetos de dados se o elemento HTML for , então o terceiro argumento fileName define o nome do arquivo de acordo com o nome do arquivo no sistema de arquivos do usuário.

formData.delete(nome)

tipos de dados SQL

Ele recebe um nome como argumento e remove o campo especificado com o mesmo nome.

formData.get(nome)

Ele também recebe um nome como argumento e obtém o valor do campo especificado com o nome fornecido.

formData.has(nome)

Também aceita o nome como argumento, verifica a existência do campo com o nome fornecido e retorna verdadeiro se existir; caso contrário, falso.

Um formulário pode ter vários campos com o mesmo nome, portanto, precisamos especificar vários métodos de acréscimo para adicionar todos esses campos com o mesmo nome.

Mas os campos com o mesmo nome causarão erros e criarão complexidade na configuração deles no banco de dados. Portanto, o formData fornece outro método com a mesma sintaxe do acréscimo, mas remove todos os campos com o nome fornecido e, em seguida, anexa um novo campo. Assim, garante que haverá uma chave única com um nome.

 formData.set(name, value) formData.set(name, blob, fileName) 

No método set, a sintaxe funciona como o método anexar.

Como iterar FormData?

FormData fornece um método FormData.entries() para iterar todas as suas chaves. Este método retorna um iterador que itera por todas as entradas de chave/valor no FormData. Uma chave é um objeto string, enquanto o valor pode ser um blob ou uma string.

Considere o exemplo abaixo:

 formData.append('key1', 'value1'); formData.append('key2', 'value2'); // Display the key/value pairs for (const pair of formData.entries()) { console.log(`${pair[0]}, ${pair[1]}`); } 

A saída do exemplo acima será:

 key1, value1 key2, value2 

Enviando um formulário com um arquivo de dados

Os arquivos também podem ser enviados utilizando o FormData. Os arquivos funcionam no elemento form e são enviados como Content-Type: multipart/form-data. A codificação multipart/form-data permite o envio de arquivos. Então, por padrão, faz parte dos dados do formulário. Podemos enviar os arquivos para o servidor com a codificação de dados do formulário.

Considere o exemplo abaixo:

 File: myform.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) console.log(data) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); }; 

No exemplo acima, o objeto de imagem é enviado no formato binário usando o FormData. Podemos ver isso na guia de rede da ferramenta do desenvolvedor:

Enviando dados de formulário como um objeto Blob

Enviar dados de formulário como um objeto blob é uma maneira fácil de enviar dados binários gerados dinamicamente. Pode ser qualquer imagem ou bolha; podemos enviá-lo diretamente para o servidor, passando-o no corpo de busca.

É conveniente enviar dados de imagem e outros dados de formulário, como nome, senha, etc. Além disso, os servidores são mais amigáveis ​​para aceitar formulários codificados em várias partes em vez de dados binários.

Considere o exemplo abaixo, que envia a imagem junto com os demais dados do formulário como um formulário.

 mycanvas.onmousemove = function(e) { let ctx = mycanvas.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => mycanvas.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append('firstName', 'Alex'); formData.append('image', imageBlob, 'image.webp'); let response = await fetch('url', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } 

No exemplo acima, podemos ver que o blob de imagem é adicionado da seguinte forma:

 formData.append('image', imageBlob, 'image.webp'); 

Que é o mesmo que um arquivo , e o usuário enviou um arquivo com o nome 'image.webp' com alguns dados imageBlob do sistema de arquivos. O servidor irá lê-los como dados normais de formulário.