Boa tarde pessoal.
Eu tenho uma galeria de imagens onde preciso rotacionar a imagem, salvar a imagem no servidor e mostrar ao usuário a imagem virada.
Para salvar no servidor uso o PHP, sem problemas.
Para fazer de forma assíncrona uso o Ajax.
A questão é que não tou conseguindo fazer isso.
Dependo de ter um botão submit para atualizar a página a mostrar o resultado.
function rotaciona(id){
var img = document.getElementById("imgGaleria");
jQuery.ajax({
data: {gal_id: id},
url: action_fotos + "rotate.php",
type: 'POST',
error: function (resposta) {
msg.empty().html(resposta);
},
success: function (resposta) {
img.src = "";
img.src = resposta; //aqui eu carrego novamente a imagem, porém ele nem vira, apenas qdo atualizo a página tendo que usar submit.
}
});
}
Então…o PHP acredito que ta correto, pois quando vejo na pasta a imagem esta virada.
vou postar uma parte do código:
$rot->rotateImage();
return $rot->save("../../../../../uploads/{$cover}");
$this->Result = "../../../../../uploads/{$cover}";
A questão é o código em Ajax.
Preciso retornar a imagem atualizada.
Tentei com a função que tenho para atualizar a galeria, a mesma que uso quando deleto, edito a legenda e envio imagem.
Porém com o rotacionar não funcionou.
Quando dou um alert na resposta do ajax, retorna a url da imagem.
Tenho que atualizar a div da imagem ?
O ajax está aparentemente tudo certo, como vc está o php mandar os dados para o ajax? Abaixo dessa linha coloque:
img.src = resposta;
console.log(resposta);
E use F12 do navegador na aba console para ver o resultado…
fonte.php (1,9 KB)
No caso volta a url da imagem.
Anexei uma parte de cada código.
Acredito que estou errando alguma coisa.
Agradeço se puder me ajudar.
Bom vamos lá, esse trecho:
echo "../../../../../uploads/{$cover}";
return $rot->save("../../../../../uploads/{$cover}");
Na verdade quando se interage com ajax só precisa do echo, qual o resultado do método save? uma string? Se sim tente isso:
echo $rot->save("../../../../../uploads/{$cover}");
Ou simplesmente mude a ordem…
$rot->save("../../../../../uploads/{$cover}");
echo "../../../../../uploads/{$cover}";
Pra que vc retorna esse save?
Mudando assim veja o console log que te mostrei para ver se mostra a url corretamente…
Só para constar, esse arquivo rotate.php é separado desse ajax certo?
E mais uma coisa, essa variável action_fotos no js, não vejo ela criada em lugar nenhum:
url: action_fotos + "rotate.php",
Seu código não mostra nenhum erro? (use F12 console para ver isso é importante e já vai te treinando para ajustar seu código e identificar erros facilmente…)
Rapaz, é uma coisa muito louca que ta ocorrendo: a imagem ta virada mais na verdade não consigo visualiza-la invertida…como se fosse cache!
Fiz diversos testes somente com a tag img, mais não consegui (ainda).
https://jsfiddle.net/50ochbt1/5/
Aqui a imagem deveria estar virada, mais não ta.
Porém se inspecionar e pedir para abrir em nova aba aparece virada.
O código ta correto então, o problema é outro.
A imagem vira mais não consigo visualizar.
Obrigada pela força!
A pagina que tem ajax é .php?
Se sim, vc pode tentar burlar o cache com um coringa assim:
jQuery.ajax({
data: {gal_id: id, joker: "<?php echo time(); ?>"},
url: action_fotos + "rotate.php",
type: 'GET',
error: function (resposta) {
msg_gal.empty().html(resposta);
},
success: function (resposta) {
img.src = resposta;
}
});
Perceba que mudei o método pra get já que vc só passa um id pra rotacionar…
Ou na página que responde o ajax (rotate.php) no topo dela você pode usar a função header para não guardar cache:
https://paulund.co.uk/disable-http-cache-with-php
Boa sorte!
Obrigadão rodevops!
Sua resposta me deu uma luz…e acabei fazendo de uma maneira melhor (eu acho)…rs
Eu coloquei um campo no bd - update_image com o time, e toda vez que rotaciono, atualizo esta data_hora ai na url da imagem uso o parâmetro - quando tem senão é null.
Função header não funcionou.
Valeu msm!!!
1 curtida