Qual é a melhor maneira de substituir o botão procurar arquivo em html?
Pergunta
Eu sei que é possível substituir o botão de navegação, que é gerado em HTML, quando você usa tag input
com type="file
.
Eu não tenho certeza qual é o melhor caminho, por isso, se alguém tem experiência com isso por favor contribuir.
Solução
A melhor maneira é fazer com que o controle de entrada arquivo quase invisível (dando-lhe uma opacidade muito baixa - não fazer " visibility: hidden " ou " display:. nenhuma ") e absolutamente posição algo sob ele - com um z-index menor
Desta forma, o controle real não será visível, e tudo o que você colocar sob ele irá mostrar através. Mas desde que o controle está posicionado acima do botão, ele ainda irá capturar os eventos de clique (é por isso que você quer usar opacidade, não visibilidade ou display - navegadores fazem o elemento unclickable se você usá-los para escondê-lo).
Este artigo vai em profundidade sobre a técnica.
Outras dicas
Os navegadores realmente não gosto de você para mexer com as entradas de arquivo, mas é possível fazer isso. Eu vi um par de técnicas, mas a mais simples é absolutamente posicionar a entrada de arquivo sobre o que você deseja usar como um botão e defina sua opacidade para zero ou perto de zero. Isto significa que quando o usuário clica sobre a imagem (ou o que você tem aí embaixo) eles estão realmente clicar no botão Procurar invisível.
Por exemplo:
<input type="file" id="fileInput">
<img src="...">
#fileInput{
position: absolute;
opacity: 0;
-moz-opacity: 0;
filter: alpha(opacity=0);
}
Se você não se importa com javascript você pode definir o opasity do arquivo de entrada para 0, coloque o controle de estilo no topo via clickevents Z-index e enviadas a partir do botão para o arquivo de entrada. Veja aqui para a técnica: http://www.quirksmode.org/dom/inputfile.html
Isto não é tecnicamente possível para fins de segurança, de modo que o usuário não pode ser enganado.
No entanto, há um par de soluções alternativas - dê uma olhada http: // www. quirksmode.org/dom/inputfile.html para um exemplo.
Para o registro, esta questão já foi solicitado aqui (onde eu dei a mesma resposta).
Você pode usar um Flash uploader como SWFUpload para fazer isso, também.