1

Estou desenvolvendo uma aplicação na qual, por questões de estética precisei recriar alguns elementos para poder personalizar corretamente cada especialmente <select> e <option>.

Então preciso passar o formulário captando a data manualmente. Para isso, estou usando:

  $('#criarConta').click(function(){
    $.ajax({
    url: "empregador.php",
    type: "POST",
    data: {
      nome:       $('#nomeSign').val(),
      email:      $('#emailSign').val(),
      senha:      $('#passSign').val(),
      local:      $('#localInput').val(),
      site:       $('#siteInput').val(),
      tipo:       $('#tipoPerfil').data('selected'),
      ramo:       $('ramoInput').data('selected'),
      profilepic: $('profilePicInput').val()
    },
    contentType: false,
    cache: false,
    processData:false,
    success: function(data){
      console.log(data);
    }
    });
  });

Coloquei esse profilepic aí pra verem onde eu pretendo chamar a imagem. Até onde sei, o .val() só vai recuperar o path do arquivo, não ele em si.

Como resolver meu caso?

7
  • Voce precisa criar um formdata para enviar a imagem, da uma olhada neste stack stackoverflow.com/questions/6974684/… Commented 17/01/2018 às 16:01
  • Você quer enviar uma server o arquivo/file?
    – Marconi
    Commented 17/01/2018 às 16:12
  • @LuizPillon E posso criar um form data sem a presença de um form? Como ficaria no meu exemplo (adicionando manualmente)?
    – bonifacio
    Commented 17/01/2018 às 16:12
  • @Marconi eu quero passar como post a imagem, juntamente com o restante dos elementos. Eu faço uma validação da imagem enviada no meu PHP, posteriormente.
    – bonifacio
    Commented 17/01/2018 às 16:14
  • 1
    let form = new FormData(); form.append("campo", $('#input').val()); form.append("file", $("input2").prop('files')[0]); Commented 17/01/2018 às 16:15

1 Resposta 1

3

Para enviar uma imagem, você pode utilizar o FormData. Essa é uma API serve justamente para armazenar valores que serão enviados via POST.

Quando você utiliza essa API, você está basicamente utilizando o enctype: multipart/form-data

Porém é necessário saber outro ponto, dessa vez com o jQuery.ajax. Por padrão o jquery transforma o valor de data para application/x-www-form-urlencoded, então você terá que informar que não deseja utilizar esse padrão.

Quando você não está trabalhando com envio de arquivos, legal, não há problemas, mas no caso de uplaods é necessário adicionar essa informação: processData:false,

Agora vamos falar sobre o input. Como capturar o arquivo e não o fake path?

Diferente dos input:text, por exemplo, o input:file há um atributo a mais. O atributo file é responsável por armazenar em um array, todos os arquivos objetos do tipo File dentro de um FileList.

Esse objeto — file — nada mais que um Blob (arquivo bruto) e é ele que será enviado para o servidor.

No caso de imagens, você pode utilizar esse objeto para exibir uma thumbnail ou até mesmo capturar a imagem utilizando o Ctrl + V

$('#criarConta').click(function(){     
    let form = new FormData();
    form.append("nome", $("#nome").val());
    form.append("file", $('#imagem').prop('files')[0]);

    $.ajax({
        url: "index3.php",
        type: "POST",
        data: form,
        cache : false,
        processData: false
    });
});

Ah, e o value, no input:file exibe apenas um C:\fakepath para evitar que você tenha acesso a estrutura de pastas do usuário.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .