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: 7651 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:

Este trecho de código ou resolução de exercício faz parte do Super Pack 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos em Java, Python, VisuAlg, Portugol, Delphi, C#, C, C++, VB.NET, Golang, Pascal, Ruby, PHP, e várias outras linguagens.

Aprenda a programar resolvendo problemas do mundo real. Tudo em português, com comentários em português.

Quero Ser Apoiador(a)


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:

Este trecho de código ou resolução de exercício faz parte do Super Pack 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos em Java, Python, VisuAlg, Portugol, Delphi, C#, C, C++, VB.NET, Golang, Pascal, Ruby, PHP, e várias outras linguagens.

Aprenda a programar resolvendo problemas do mundo real. Tudo em português, com comentários em português.

Quero Ser Apoiador(a)


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

E-Books em PDF

E-Book 350 Exercícios Resolvidos de Java - PDF com 500 páginas
Domine lógica de programação e a linguagem Java com o nosso E-Book 350 Exercícios Exercícios de Java, para você estudar onde e quando quiser.

Este e-book contém exercícios resolvidos abrangendo os tópicos: Java básico, matemática e estatística, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book
E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas
Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser.

Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 38 usuários muito felizes estudando em nosso site.