3

Estou enviando os seguintes dados para salvar um formulário:

function editaFeira(id, descricao){
if (confirm("Confirma a alteração de " + descricao + "?"))
{
  $.ajax({
    type: "POST",
    url: "functions/editarFeira.php",
    data: {id: id,
           descricao: $("#descricao").val(),
           horario: $("#horario").val(),
           pagamento: $("#pagamento").val(),
           quem: $("#quem").val(),
           //QUERO BOTAR A IMAGEM AQUI!!!
          },
    success: function(data) {
      if (data == 'ok'){
        alert(descricao + ' editado com sucesso!');
        listaFeira();
      }
    }
  });
}
}

Consigo enviar todos os dados comuns, mas não sei como passar o dado da imagem.

Como faço para informar ao php que existe um upload?

1

1 Resposta 1

6

Para enviar imagens via AJAX é preciso usar o objeto FormData e configurar a requisição ajax dessa forma. Lembrando que não é necessário pegar o valor separadamente de cada <input> como você está fazendo, basta definir um if para sua form, algo como:

<form id="myForm">
 ...
</form>

Dessa forma ele vai criar uma estrutura chave valor com o valor da chave igual ao name dos seus <input>.

$.ajax({
    url: 'functions/editarFeira.php',
    method: 'post',
    data: new FormData($('#myForm')[0]),
    cache: false,
    contentType: false,
    processData: false,
    success: function(retorno){

    },
});// Fim do ajax

Caso queira você também pode mostrar uma prévia da imagem que você está carregando usando o seguinte código:

var input_e = $('#inputImagem')[0]; // input que carrega a imagem
if (input_e.addEventListener) {
    input_e.addEventListener("change", function (evt) {
        var reader = new FileReader();
        var file = this.files[0];
        if (!!file.type.match(/image.*/)) {
            if ( window.FileReader ) {
                reader.onloadend = function (e) {
                    // Muda o src da tag `img` para mostrar imagem que o usuário carregou
                    $('#image-list').attr('src',e.target.result);
                };
                reader.readAsDataURL(file);
            }
        }
    }, false);
}
2
  • Como o PHP recebe a informação da imagem? Commented 20/01/2018 às 14:33
  • ele vai receber a imagem na super global $_FILES. A partir dai você pode mudar o nome do arquivo, salvar ela na basta do seu servidor que bem desejar, dentre várias outras coisas. se quiser ler mais sobre essa super global pode acessar esse link php.net/manual/pt_BR/reserved.variables.files.php
    – Phelipe
    Commented 20/01/2018 às 14:36

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 .