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 Jack Oliveira
      Ola pessoal boa noite
       
      Bom pessoal estou fazendo uma função para formatar url de rede social,
      FACEBOOK, INSTAGRAM & TWITTER, não sei se esta da forma correta em fazer.
      Ex: https://www.facebook.com/minha-pagina   quero pegar apenas o final que seria minha-pagina 
      Isso seria tanto no instagram e twitter
       
      Fiz da seguinte forma
      <?php function FormatarUrlRedeSocial($URL){ if (strstr($URL, 'https://facebook.com/') || strstr($URL, 'http://facebook.com/')) { $UrlRedeSocial = explode('facebook.com/', $URL); return $UrlRedeSocial[1]; } elseif (strstr($URL, 'http://') || strstr($URL, 'https://')){ $UrlRedeSocial = explode($URL); $UrlRedeSocial = explode($UrlRedeSocial[1]); return $UrlRedeSocial[0]; } else { return $URL; } } ?> Porem quero que seja apenas uma função unica para todos 
      Tipo
      https://www.facebook.com/<?= FormatarUrlRedeSocial($dados['url_facebook']); ?> https://www.instagram.com/<?= FormatarUrlRedeSocial($dados['url_instagram']); ?> https://www.twitter.com/<?= FormatarUrlRedeSocial($dados['url_twitter']); ?>  
      Bom do porque não usar os link´s direto, bom pois em outras parte que vou pegar este nome no final não poderia ter o link completo
      Então decide fazer uma função onde não vou precisar criar vários campos na tabela sem necessidades. Espero que possam entender o que preciso.
       
      Se puder da uma ajuda fico grato...
    • By Xicara
      Olá boa tarde!
       Eu tenho um jogo e um site para cadastro de contas. E agora estou querendo implementar um sistema VIP de preferencia com dias para acabar! No meu  banco de dados do jogo, tenho a tabela: contas com os campos: id / senha / ip / e agora adicionei o campo vip, o valor é de 1 a 5 e já esta funcional no jogo porém esse beneficio está permanente para os jogadores, minha duvida é: o valor do campo vip tem como eu programar para cada 30 dias zerar novamente automático? Não zerar de todos, mais sim daquele que atingiu os 30 dias, eu estava pensando em adicionar mais um campo: data de inicio, será que tem possibilidade por exemplo o site identificar a data e excluir o valor do campo quando atingir os 30 dias?
      Obrigado pela atenção!
    • By Renato Fonte
      Olá, Amigos (as),
              
      Este código (abaixo) é de um Site Imobiliário. Esta é a página (html) de edição e inclusão de dados e fotos dos imóveis no Painel Admin.
      Durante muito tempo, no navegador Chrome, o Botão para Upload das Fotos, simplesmente deixava de aparecer.
      Mas ao configurar site, permissões, javascript - permitir, o botão voltava à aparecer.
      Porém, há alguns dias essa ação não funciona mais, em navegador nenhum. Não aparece mais o botão.
              
       Pode ter sido função PHP, Query ou Json que se tornou obsoleta?
              
      Tentei varias ações mas não consigo encontrar o erro para atualizar.
              
      DOCUMENTAÇÃO JS:
      https://jclareteimoveis.com.br/app/helpers/uploadfy/js/jquery.uploadify.v2.1.4.min.js
      https://jclareteimoveis.com.br/app/helpers/uploadfy/js/swfobject.js
       
      Conto com a ajuda de vocês para me salvar dessa!
       
      Obrigado à todos!
       
       
      <link href="helpers/uploadfy/css/uploadify.css" type="text/css" rel="stylesheet" />
              <script type="text/javascript" src="helpers/uploadfy/js/swfobject.js"></script>
              <script type="text/javascript" src="helpers/uploadfy/js/jquery.uploadify.v2.1.4.min.js"></script>        
      <script>
                  $(document).ready(function() {                
                      $('#fupload').uploadify({
                          'uploader'  : 'helpers/uploadfy/js/uploadify.swf',
                          'script'    : '[baseUri]/admin/uploadr/[item_id]/',
                          //'cancelImg' : 'helpers/uploadfy/js/cancel.png',
                          'cancelImg' : 'images/icons/cancelb.png',
                          'folder'    : 'app/fotos',
                          'auto'      : true,
                          'multi'     : true,
                          'buttonText'  : 'Upload',
                          'sizeLimit'   : 25002400,
                          'width'       : 275,
                          'height'       : 40,  
                          //'queueSizeLimit' : 10,
                          'uploadLimit' : 1,
                          'fileExt'     : '*.jpg;*.gif;*.png;*.bmp;*.jpeg',
                          'fileDesc'    : 'Imagens (JPG, GIF, PNG, BMP)',
                          //'buttonImg'   : 'helpers/uploadfy/upload.png',
                          'buttonImg'   : 'images/icons/uploadr.png',
                          'onAllComplete': function(event, queueID, fileObj,response){
                              reloadFotoBind();
                          },
                          'onComplete': function(event, queueID, fileObj,response){                        
                              var response = $.parseJSON(response);
                              $(response).each(function(k,v){
                                  if(v.id != 'error'){
                                      $('<li id="li_'+v.id+'"><img src="[baseUri]/thumb/'+v.url+'/130/100/" id="img_'+v.id+'"/></li>').appendTo('#photo-gallery-ul');
                                  }else{
                                      $('<li>erro</li>').appendTo('#photo-gallery-ul');
                                  }
                              })
                              //window.location = '[baseUri]/admin/item/editar/[item_id]/fotos/';
                          }            
                      })
                  })
              </script> 
              
              
              <input id="fupload" name="upload" type="file" class="hide" />
              
    • By Tecnix
      Preciso de ajuda para colocar uma função IF - Else no código abaixo, meu objetivo é que essa parte do código só possa rodar quando eu apertar e segurar a tecla z, agradeceria muito se me ajudassem
      o código:
       
          "lock_new_victim": {
              "type": "origins:target_action_on_hit"
              "cooldown": 0,
              "entity_action": {
                  "type": "origins:and",
                  "actions": [
                      {
                          "type": "origins:execute_command",
                          "command": "tag @s add PuppeteerVictim",
                          "permission_level": 2
                      },
                      {
                          "type": "origins:execute_command",
                          "command": "execute as @s at @s store result score @s VictimOwnerUUID1 run data get entity @p[tag=Puppeteer] UUID[0]",
                          "permission_level": 2
                      },
                      {
                          "type": "origins:execute_command",
                          "command": "execute as @s at @s store result score @s VictimOwnerUUID2 run data get entity @p[tag=Puppeteer] UUID[1]",
                          "permission_level": 2
                      },
                      {
                          "type": "origins:execute_command",
                          "command": "execute as @s at @s store result score @s VictimOwnerUUID3 run data get entity @p[tag=Puppeteer] UUID[2]",
                          "permission_level": 2
                      },
                      {
                          "type": "origins:execute_command",
                          "command": "execute as @s at @s store result score @s VictimOwnerUUID4 run data get entity @p[tag=Puppeteer] UUID[3]",
                          "permission_level": 2
                      }
                  ]
              }
          },
    • By Felper
      Estou criando um jogo de avançar casas e não estou conseguindo somar os valores sorteados pelo dado. Quero fazer assim:
      let somadado=0;
      let valorsorteado=5;
      somadado=5;
      valorsorteado=3;
      somadado=8;
      valorsorteado=2;
      somadado=10;
       
      Assim por diante. 
       
×

Important Information

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