14.03.2025

Enviando FormData via Ajax no jQuery: multipart/form-data

Resumo Rápido

$.ajax({
  url: "submit.php",                 // Especifique o endereço do manipulador de dados
  type: "POST",
  data: new FormData($('form')[0]),  // Crie os dados do formulário em um objeto FormData
  processData: false,                // Desativar o processamento de dados
  contentType: false,                // Desativar a determinação automática do tipo de conteúdo
  success: function(response) {      // Função chamada em caso de submissão bem-sucedida
    console.log(response);           // Examine a resposta do servidor
  }
});

Para enviar um formulário no formato FormData usando o método $.ajax do jQuery, defina processData e contentType como false para habilitar a codificação multipart.

Trabalhando com FormData: Principais Insights

FormData e Ajax se combinam perfeitamente; vamos ver por quê.

• Adicionando Dados Adicionais: FormData é excelente para armazenar dados. Por exemplo:

  let formData = new FormData();
  formData.append('username', 'johndoe');              // Prepare o nome de usuário para envio
  formData.append('foto_perfil', $('input[type=file]')[0].files[0]); // E a foto do usuário: o servidor ficará contente

• Trabalhando com Arquivos: Para enviar um arquivo, utilize corretamente um campo input do tipo file:

  formData.append('file', $('input[type=file]')[0].files[0]); // Envie a foto de um animal de estimação ou um documento importante

• Respostas do Servidor em Vários Formatos: O servidor pode se comunicar não apenas através de JSON, então a opção dataType deve corresponder ao formato de dados esperado.

Configuração Adequada do Ajax e FormData

Uma configuração adequada das requisições Ajax é a chave para o sucesso. Aqui estão algumas dicas:

• Evitando o Cache de Requisições HTTP: cache: false. Isso evita que os dados sejam armazenados em cache.
• Configuração com beforeSend: beforeSend configura ainda mais o objeto jqXHR.
• Verificando a Preparação do DOM: Use $(document).ready() para garantir que a página esteja completamente carregada antes de executar seu código.

Visualização

Enviar objetos FormData via Ajax no jQuery é como enviar um pacote pelo correio aéreo! 🛫

Carregue a carga no "avião":

let container = new FormData();
container.append('camisa', '👚');
container.append('câmera', '📷');
container.append('óculos_de_sol', '👓');
container.append('creme_dental', '🧴');

Depois, envie-o em seu voo:

$.ajax({
  url: 'seu-destino.com/checkin',
  type: 'POST',
  data: container,
  processData: false, // Deixe o conteúdo do "pacote" intocado
  contentType: false, // O conteúdo da remessa permanece em segredo
  success: function(data) {
    alert('Pacote entregue com sucesso! Agora é hora de se divertir!');
  }
});

O pacote foi enviado para o servidor! Desejamos uma boa viagem! 🛫

Métodos Avançados para Trabalhar com FormData e Ajax

É hora de operações mais complexas:

• Definindo enctype para envio de arquivos: Defina o enctype do formulário como 'multipart/form-data' para garantir a transferência adequada de arquivos.
• Usando Nomes Únicos para Arquivos: Para evitar conflitos de nomes, use a função time() no lado do servidor para gerar nomes únicos.
• Manipulando Arquivos Enviados Corretamente no Lado PHP: Use move_uploaded_file() para mover arquivos para o local desejado.

Jogando Jogo da Velha com Ajax

Às vezes, é crucial que o Ajax responda às suas ações imediatamente:

$('#uploadButton').on('click', function() {
  // Requisição AJAX enviada!
});

Solucionando Problemas com Arquivos Enviados

Encontrar problemas relacionados aos nomes dos arquivos pode acontecer com frequência. Veja como resolvê-los:

$uniqueName = time() . '_' . $_FILES['file']['name'];     // Garantir que o nome do arquivo seja único
move_uploaded_file($_FILES['file']['tmp_name'], "uploads/" . $uniqueName); // Arquivo movido para a pasta de uploads

Recursos Úteis

1. jQuery.ajax() | Documentação da API jQuery — Um guia completo sobre como usar $.ajax no jQuery.
2. FormData - APIs da Web | MDN — Documentação oficial do MDN para FormData.
3. Introdução ao AJAX — Uma introdução ao AJAX para iniciantes.
4. Enviando multipart/form-data com jQuery.ajax - Stack Overflow – Uma discussão sobre o envio de FormData usando jQuery.ajax().
5. Ajax — Async, Callback & Promise — Uma explicação sobre AJAX, JavaScript assíncrono e a Fetch API.
6. Axios — Muitos exemplos e informações sobre como usar Axios como uma alternativa ao AJAX.
7. XMLHttpRequest Level 1 — Um tutorial sobre AJAX da W3C.

Video

Navigation