0

olá basicamente o que quero fazer é um sistema parecido com o do facebook, de criar posts. Aonde voce aperta em enviar foto, escolhe a foto e automaticamente a foto vai pro servidor e tem um feedback visual de que a foto esta indo e depois aparece a miniatura da imagem, a minha unica duvida é como fazer a parte do ajax apenas na foto e não no submit do formulario

VIEW:

<form id="form" action="enviarPost" method="post">
  <div>

    <textarea name="texto"></textarea>

    <input type="file" id="foto" name="foto" style="display: none;">

    <button id="button_foto" type="button"> Enviar Foto</button>

    <button type="submit">Enviar</button>

  </div>
</form>

O que eu queria fazer era pegar o evento onClick ou onChange do "#button_foto" e pegar a foto e enviar via ajax para o controller, e então fazer o upload com $_FILES e retornar o link da foto no ajax, pra então dar um append no post com a miniatura da imagem assim como,

Resumindo: quero saber como pegar a imagem do input via ajax e jogar pro controller.

1

1 Resposta 1

1

2 coisas a fazer

1º Adicionar enctype no form

<form enctype="multipart/form-data" id="form" action="enviarPost" method="post">
</form>

2º Adicionar atributos no ajax

$.ajax({
        url: "urldesejada.php",
        data: formData,
        *cache: false,
        contentType: false,
        processData: false,*
        type: "POST",
        success: function(response){}
});

Código completo:

<form enctype="multipart/form-data" id="form" action="enviarPost" method="post">
   <div>
     <textarea name="texto"></textarea>
     <input type="file" id="foto" name="foto" style="display: none;">
     <button id="button_foto" type="button"> Enviar Foto</button>
     <button type="submit">Enviar</button>
   </div>
</form>

<script>
  $(document).ready(function(){

    $('#button_foto').click(function(){

      var imagem = $('button_foto').val();

      $.ajax({
        url: "urldesejada.php",
        data: imagem,
        cache: false,
        contentType: false,
        processData: false,
        type: "POST",
        success: function(response){}
      });

    });

  });
</script>
1
  • 1
    Se os dados serão enviados via AJAX, não precisa ter o atributo enctype. Commented 14/02/2018 às 19:59

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 .