2

Tenho um form de upload de imagens aonde o usuário antes de fazer um update na imagem de avatar ou capa de perfil, ele visualiza (neste mesmo form) sua imagem cadastrada ou uma padrão do sistema.

Acontece que meu input type tem um "onchange" e meu input submit é com "onclick" ou seja, meu submit acaba sendo um href e gostaria de dar um "hide" nele para enquanto o file não for selecionado, ele fique oculto e quando file tiver um arquivo selecionado este href seja exibido para proceder a requisição de upload.

Segue meu form:

<form id="up_cover">
  <input type="file" onchange="readURL(this);">
  <a href="javascript:; onclick=document.getElementById(up_cover).submit();">
    Atualizar
  </a>
  <input type="hidden" name="update_cover_user">
</form>

2 Respostas 2

2

Lauro, tem várias opções aqui, eu prefiro sempre separar o javascript e o HTML para não ter javascript dentro do HTML como neste caso <a href="javascript:; onclick=document.getElementById(up_cover).submit();">. Isso é relativamente simples e deixa o código mais limpo.

Seguindo esse princípio aqui fica uma versão revista sem saber exatamente o que faz a função readURL() uma vez que você não colocou esse código.

HTML (sem javascript):

<form id="up_cover">
    <input type="file" /> 
    <a href="#" class="atualizar" style="display: none;">
        Atualizar
    </a>
    <input type="hidden" name="update_cover_user" />
</form>

Javascript (com jQuery):

$('#up_cover input[type=file]').on('change', function () {
    $(this).next('a.atualizar').toggle(this.value); 
    readURL(this);
});

$('#up_cover a.atualizar').on('click', function (e) {
    e.preventDefault();
    $(this).closest('form').submit();
});

Exemplo online

Na primeira parte do código uso o .toggle() para esconder ou mostrar o link caso haja um ficheiro escolhido ou não. Na segunda parte do código, faoo ele procurar a <form> em que o <a> está inserido e submetê-la. Desta maneira o seu código fica mais flexível e pode ter somente este código para forms (ou partes dela) diferentes, sem ter de ir linha a linha no HTML adicionar javascript.

8
  • 1
    Inteligente o uso do toggle() com o valor do input!
    – bfavaretto
    Commented 24/04/2014 às 4:14
  • @Sergio seu exemplo é exatamente o que procurava porém não pude implementá-lo?? Em meu script chama uma modal e o readurl() uma outra função que verifica se input type file tem algum valor caso não tenha ou mostra o registro do banco ou mostra um registro default (caso tbm não tenha no banco).Como não consegui pensei que podia ser um conflito com os códigos já existentes no modal dai coloquei seu código em uma página limpa más mesmo assim não funcionou. Esconde o link href mas não mostra quando eu seleciono uma imagem? Commented 24/04/2014 às 4:45
  • @LauroMoraes, pode colocar o seu código numa página que eu possa ver? no seu site ou num jsFiddle? Tem algum erro na consola?
    – Sergio
    Commented 24/04/2014 às 5:15
  • [link]db.tt/vvA5lXRy Commented 24/04/2014 às 5:25
  • @LauroMoraes, ok. O problema é que o código está a correr antes do HTML ser corrido. Mude o meu código para dentro do seu $(document).ready(function() { , assim o código vai correr depois de a página ter carregado.
    – Sergio
    Commented 24/04/2014 às 5:33
0

Para você manipular um objeto, seja ele um link < a > ou qualquer outro objeto html, quando você pensa em manipular você deve atribuir um ID único sem repetição nesse objeto para que você possa o identificar e executar commandos sobre o objeto ele.

Para esconder um objeto em jQuery você utiliza o seguinte comando:

$('#ID_ATRIBUTO').hide();

Para exibir o objeto você utiliza o seguinte comando:

$('#ID_OBJETO').show();

Para se remover um atributo do objeto como você citou em sua pergunta pode ser feito da seguinte forma:

$('#ID_OBJETO).removeAttr('href');

O comando acima irá remover o href do objeto indicado

BONUS É possível também manipular o objeto de outras formas a não ser pelo ID, como por exemplo pela tag NAME do objeto, lembrando que fazendo isso, todos os objetos que tiverem o mesmo name vão receber os commandos aplicados.

Exemplo (usando o name do seu objeto da pergunta):

//esconde o objeto
$('a[name=update_cover_user]').hide();
//exibe o objeto
$('a[name=update_cover_user]').show();

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .