 |
|
Você está aqui: JavaScript ::: Elementos de Formulários HTML ::: input type file Element/Object |
Como ocultar um input type file e usar um botão ou uma imagem para permitir que o usuário selecione o(s) arquivo(s)Quantidade de visualizações: 7868 vezes |
|
Por padrão, um input type file é exibido como um botão escrito "Escolher arquivo" e o texto "Nenhum arquivo selecionado" logo ao lado. Às vezes gostaríamos de mudar esta aparência, talvez para um melhor ajuste no nosso design. Nesta dica eu mostro como podemos ocultar o input type file e fornecer um outro botão ou uma imagem em seu lugar. Veja primeiro como usar um botão comum: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Estudos JavaScript</title>
</head>
<body>
<form>
<input id="arquivo" name="arquivo" type="file" style="display:none">
<button onclick="escolherArquivo()">Escolha o arquivo</button>
</form>
<script type="text/javascript">
function escolherArquivo(){
// vamos obter uma referência ao elemento file
var arquivo = document.getElementById("arquivo");
// vamos disparar seu evento onclick()
arquivo.click();
}
</script>
</body>
</html>
Note que usamos a propriedade style do input type file para definir o valor display:none, ocultando-o. Em seguida temos um botão e, no seu evento onclick(), nós chamamos uma função JavaScript responsável por disparar o evento click() do input type file. Veja agora como podemos usar uma imagem: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <form> <input id="arquivo" name="arquivo" type="file" style="display:none"> <a href="javascript:escolherArquivo()"><img src="upload.jpg" border="0" /></a> </form> Abra essa página no seu navegador e clique na imagem. Você verá que automaticamente a janela de seleção de arquivo(s) será exibida. |
 Link para compartilhar na Internet ou com seus amigos: |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
|
JavaScript - Como filtrar os elementos de um array em JavaScript usando a função filter() - Vetores e matrizes em JavaScript |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
