Deletar imagem com JQuery

Programação
#1

Tenho uma página que contém um input file, mas, por limitações de mudança de interface em cima desse componente HTML, resolvi criar um botão vinculado a esse input.
Para o input file coloquei um id = arquivo, do qual verifico (com jQuery) se ele foi mudado ($("#arquivo").change(function(event)) e chamo o arquivo que faz o upload da imagem. Até ai tudo bem, porém, tenho um botão que deleta essa imagem e que ao tentar deletá-la acaba acionando o $("#arquivo").change e a imagem é inserida novamente.
Gostaria de saber se há alguma outra alternativa de fazer a chamada do input file. Tentei com o .click, porém, ele não espera eu selecionar a imagem, já executando todo script de uma vez.

$("#arquivo").change(function(event){
        $("#dados").ajaxForm({
            url: "../../php/cliente/uploadCliente.php",
            type:"POST",
            beforeSend: function(){
                $('#load').removeClass("nao-carregar");
                $('#load').addClass("carregar");
            },
            success: function(data) {
                $("#imagem").attr("src", data);
                $('#load').removeClass("carregar");
                   $('#load').addClass("nao-carregar");
            }
        }).submit();
    });

Método de deletar imagem:

function deletarImagem() {

    var img = $("#imagem").attr("src");
    if (img == undefined)
        img = "";

    if (confirm("Você deseja excluir essa imagem?")) {
        $.ajax({
            type: "POST",
            url: '../../php/cliente/deletarImagem.php',
            data: {
                codigo: $(".codigo").val(),
                imagem: img
            },
            beforeSend: function(){
                $('#load').removeClass("nao-carregar");
                $('#load').addClass("carregar");
            },
            success: function (data) {
                alert(data);
                $('#load').removeClass("carregar");
                $('#load').addClass("nao-carregar");

                $("#imagem").attr("src", " ");
                deletou = true;
            },
            error: function (data) {
                alert(data);
                $('#load').removeClass("carregar");
                $('#load').addClass("nao-carregar");
            }
        });
    }
}

Desde já, agradeço.

#2

Acho que quem deleta arquivos é o php.
Dentro do seu php chamado por post, adiciona um variável,

Por exemplo

$url_da_imagem = "../imagens/foto.jpg";

Depois faz um unlink($url_da_imagem), é isso que você quer fazer?

#3

Sim, mas o problema está após a exclusão do PHP, pois assim que o arquivo deletarImagem.php é executado, outra imagem é criada.
Na minha página, tenho uma div que mostra essa imagem que é adicionada e pelos teste que fiz, o evento .change é disparado após setar o src da imagem na function deletarImagem()

#4

Tenho dificuldade em JQuery, sou iniciante mas uso JavaScript.
Quando eu quero excluir alguma imagem eu uso o Php para executar a exclusão, e faço apenas um display:block na imagem deletada, ou na div que ele se contra, pegando ela pelo Id com JavaScript, ai quando a pessoa atualizar a página, a imagem já não existe

Há formas mais simples de fazer essas coisas, tenta usar essa lógica que eu falei, pode dar certo pra você.

#5

Tentei aqui mas não resolveu, ainda continua criando uma nova imagem :disappointed:

#6

É um meio termo, mas é assim que acontece , e é que a gente faz acontecer o dinamismo.
Quando o seu JQuery executa o post para a página php, o Php se encarrega de excluir o arquivo, porém ele ficará visível para o usuário, ai a gente pode colocar o display dessa imagem para none e podemos apresentar uma mensagem dizendo que ela foi excluída, daí o usuário vai ter aquela certeza que a foto não existe mais…e realmente não existe, ela só esta no cache do navegador.

Quando eu faço isso usando Ajax puro, após a função unlink do php excluir a imagem, eu faço ele retornar um echo “imagem_excluida”; por exemplo, ai eu pego essa “imagem_exlcuida” com o reponseText do Ajax, que se não me engano equivale ao success do JQuery, ai fagora é só básico, cria a condição, se (resposeTex == “imagem_excluida” ) {getElementByid(“imagem”).style.display=“none”;

Deu pra entender mais ou menos ? O ajax ou Jquery faz a requisição e a partir disso, a gente cria o dinamismo para o usuário.

#7

Primeiramente, muito obrigado pelo interesse em ajudar Renato…
Eu entendi sim. Eu já tinha implementado esse “dinamismo”, mas, o problema maior, é que sempre que deleto a imagem no PHP é criado uma outra nova, entendeu? Ai a imagem não é excluída da div.

#8

Entendo sim, infelizmente eu não tenho uma boa intimidade com jQuery, se eu tivesse, tentaria consertar para você, mas sou muito leigo nesse método.

Espero que alguém possa ajudar nesta dúvida, valeu!

#9

Muito obrigado pela ajuda e atenção Renato!

1 curtida
#10

Estamos ai!! Valeu :smiley: