Jump to content
gustalevin

Tentando upload de JPG através de Javascript e Ajax

Recommended Posts

Criei o seguinte formulário abaixo no site de um cliente, pra que se possa fazer a troca da foto de um usuário:

<form id="formulario" method="post" enctype="multipart/form-data">
    <div class="blocoCampo">
        <span> Escolher nova foto (dimensões: 50px x 50px; formato: JPG) </span>
        <input type="file" id="imgupload" name="imgupload">
    </div>
    <div class="confirmarTrocaSenha">
        <input type="button" value="" id="btn_troca_foto">
    </div>
</form>

Em seguida, eu criei na função abaixo (javascript) pra ele conferir a extensão e as medições em Pixels do arquivo. Ele deve ser sempre 50x50 e JPG:

var _URL = window.URL || window.webkitURL;
$("#imgupload").change(function (e) { // Aqui verifica as dimensões e a extensão do arquivo
    var foto = $('#imgupload').val();
    var extensao = foto.substr(foto.length - 3);
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            if(this.width !== 50){
                alert('Dimensões não permitidas!');
                $("#imgupload").val('');
            }
            else if(this. height !== 50){
                alert('Dimensões não permitidas!');
                $("#imgupload").val('');
            }
            else if(extensao != 'jpg'){
                alert('Extensão não permitida!');
                $("#imgupload").val('');
            }
        };
        img.src = _URL.createObjectURL(file);
    }
});

E abaixo é a função que deve hospedar a foto, depois que a mesma for carregada:

$('#btn_troca_foto').click(function(){
    var imgupload = $('#imgupload').val();
    if(imgupload == ''){
        alert("Nenhuma foto selecionada!");
    }
    else{
        $.ajax({
            url: "trocarfoto",
            type: "POST",
            data: { imgupload: imgupload },
            success:function(a){
                alert(a);
                $('.contentLightbox, .bgLightbox').fadeOut();
            }
        });
    }
});

E o link da função trocarfoto está em PHP abaixo:

public static function trocaFoto() {
    @mkdir('upload/wt_usuario', 0777);
    $target = "upload/wt_usuario/" . $_SESSION['usuario']['id'] . ".jpg";

    move_uploaded_file($_FILES['imgupload']['tmp_name'], $target);
    echo "Foto de perfil alterada";
}

Tudo funcionando, menos a parte da função move_uploaded_file, que deveria pegar o arquivo que está no input imgupload e transferir pro diretório no servidor do meu site.

O que será que tem de errado ou que pode estar faltando? Sei que procurando na internet tem várias formas de fazer, mas acredito que esteja faltando apenas algum detalhes no meu código.

Agradeço quem puder ajudar.

Share this post


Link to post
Share on other sites

No seu código PHP faça um tratamento antes de mover o arquivo para receber a mensagem de erro (caso haja um erro), para saber se o problema está acontecendo durante o envio, por acaso seu arquivo é gravado em algum lugar? 

 


if (is_uploaded_file($_FILES['imgupload']['tmp_name'])) {

  move_uploaded_file($_FILES['imgupload']['tmp_name'], $target);
    echo "Foto de perfil alterada";

} else {

    echo "Não foi possível enviar o arquivo";

}

Share this post


Link to post
Share on other sites
30 minutos atrás, Sergio S. F. Pereira disse:

No seu código PHP faça um tratamento antes de mover o arquivo para receber a mensagem de erro (caso haja um erro), para saber se o problema está acontecendo durante o envio, por acaso seu arquivo é gravado em algum lugar? 

 

 


if (is_uploaded_file($_FILES['imgupload']['tmp_name'])) {

  move_uploaded_file($_FILES['imgupload']['tmp_name'], $target);
    echo "Foto de perfil alterada";

} else {

    echo "Não foi possível enviar o arquivo";

}

 

Coloquei esse código que tu sugeriu e, pelo visto, não está enviando o arquivo. Muito estranho.

Será que é alguma coisa do AJAX?

Share this post


Link to post
Share on other sites

O problema é que o PHP é server side e o JS client side, então não é um POST direto do server o PHP não reconhece. Vamos tentar diferente, no seu ajax coloque assim:


$('#btn_troca_foto').click(function(){
  var formData = new FormData($("#formulario")[0]);
  $.ajax({
    url: "trocarfoto",
    type: "POST",
    data : formData,
    processData: false,
    contentType: false,
    success: function(a){
        alert(a)
    },
    error: function(xhr, ajaxOptions, thrownError) {
       console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
});

Olhe no console pra ver se retornou algum erro.

Share this post


Link to post
Share on other sites
18 horas atrás, Sergio S. F. Pereira disse:

O problema é que o PHP é server side e o JS client side, então não é um POST direto do server o PHP não reconhece. Vamos tentar diferente, no seu ajax coloque assim:

 


$('#btn_troca_foto').click(function(){
  var formData = new FormData($("#formulario")[0]);
  $.ajax({
    url: "trocarfoto",
    type: "POST",
    data : formData,
    processData: false,
    contentType: false,
    success: function(a){
        alert(a)
    },
    error: function(xhr, ajaxOptions, thrownError) {
       console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
});

 

Olhe no console pra ver se retornou algum erro.

Deu certo, Sérgio!

Foto sendo hospedada!

Obrigado

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By rafa-martin
      Boa tarde. Gostaria de saber como faço para que o usuário volte para a página que estava após fazer novo login.
       
      Por exemplo, o usuário depois de logado estava na pagina https://site.com.br/curso/2 e saiu fazendo logout. Após ele logar novamente, como redireciono esse usuário para a página que ele estava (https://site.com.br/curso/2)?
    • By Rasp
      Fala galera! Estou com a seguinte situação e queria uma ajuda de pôr onde seguir o meu raciocínio para resolver:
       
      Possuo um array X com dados que vem do meu backend, exemplo:
       
      array = [ 0: [1, 'Banana', '3.00', '...'], 1: [2, 'Maça', '4.00', '...'], 2: [3, 'Abacaxi', '5.00', '...'] ];
      Monto para o usuário uma tela com a tabela desses dados, com informações resumidas e um botão "detalhar" para exibir o conteúdo em um modal:
       
      | ID | Fruta | Preço| Ação | | 1 | Banana | 3.00 | Detalhar | | 2 | Maça | 4.00 | Detalhar | | 3 | Abacaxi| 5.00 | Detalhar | Até aí tudo certo, funciona redondo. Mas preciso fazer com que ao abrir o modal, independente do registro que cliquei (ID 1, 2 ou 3), eu possa "navegar" entre os outros registros no modal (possuo botões para isso) sem precisar sair do modal, como se fosse uma paginação.
       
      Como poderia construir essa lógica?
    • By Matheus Bispo
      Bom dia.
       
      Estou com uma situação, tenho um Objeto chamado parametros.params.
       
      Dentro deste objeto, pode vir 1 item ou 2 item ou 3 item, enfim, N itens.
       
      Exemplo:
       
      Parametros.params{
      carro: "Gol"
      };
       
      ou
       
      Parametros.params{
      modalidade: "Futebol",
      duracao: 90
      };
       
      Percebem que os nomes dos itens, os valores e a quantidade mudaram, isso é o que acontece no meu caso. Continuando...
       
      Tenho 2 funções:
       
      function chamarmetodo1(argument1, argument2){};
       
      function chamarmetodo2(argument){};
       
      Existe algum método de eu criar algo parecido com isso
       
      chamarmetodo1(parametros.params);
       
      chamarmetodo2(parametros.params);
       
      Ou seja, gostaria de chamar o método que for, indiferente de quantos parâmetros ele espera, e com os itens que vem dentro do meu objeto parametros.params, tem como fazer isso?
       
       
    • By bruno153
      Pessoal, 
       
      preciso super de uma ajuda com o seguinte problema, eu preciso transformar com o javascript um JSON dessa forma:

      {
        "registros": {
          "valores": [
            {
              "label": "DANILO KATHSON BILRO DE SOUZA",
              "data": [
                {
                  "realizado": "96.51"
                },
                {
                  "realizado": "94.58"
                },
                {
                  "realizado": "89.99"
                },
                {
                  "realizado": "93.38"
                }
              ]
            },
            {
              "label": "FRANCISCO GEILSON RAMALHO",
              "data": [
                {
                  "realizado": "88.94"
                },
                {
                  "realizado": "95.95"
                },
                {
                  "realizado": "94.20"
                },
                {
                  "realizado": "92.36"
                }
              ]
            }
          ]
        }
      }
       
      Para que ele fique dessa forma:

      {
        "registros": {
          "valores": [
            {
              "label": "DANILO KATHSON BILRO DE SOUZA",
              "data": ["96.51", "94.58", "89.99", "93.38"]
              ]
            },
            {
              "label": "FRANCISCO GEILSON RAMALHO",
              "data": ["88.94", "95.95", "94.20", "92.36"
              ]
            }
          ]
        }
      }

      poderiam me dar um caminho de como eu poderia fazer isso?

      Desde já, agradeço muito pelo atenção.
    • By Sapinn
      Fala galare, blz? Então, estou desenvolvendo um sistema de vendas e eu gostaria de saber como fazer para devolver o produto ao estoque no caso de cancelamento da venda ou na devolução.
      Por exemplo:
      Digamos que eu tenha um estoque com 10 fones de ouvido, 5 teclados e 20 pen drives.
      Então um cliente comprou 1 fone de ouvido, 1 teclado e 2 pendrive, eu já consigo ajustar o estoque para diminuir ficando:
      9 fones de ouvido, 4 teclados, 18 pen drives.
       
      Mas digamos que, por alguma razão, o cliente gostaria de devolver o pen drives e o fone de ouvido como eu faria para colocar ambos de volta ao seu respectivo estoque, ou seja ajustar os 9 fones e os 18 pen drive de volta para 10 fones e 20 pen drive??
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.