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.