Tentando upload de JPG através de Javascript e Ajax

[gustalevin 0]

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.

[Sergio S. F. Pereira 39]

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";

}

[gustalevin 0]

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?

[Sergio S. F. Pereira 39]

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.

[gustalevin 0]

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