Qual é a melhor maneira de substituir o botão procurar arquivo em html?

StackOverflow https://stackoverflow.com/questions/108149

  •  01-07-2019
  •  | 
  •  

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.

Foi útil?

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.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top