Programação

jQuery – Personalizar botão Browse Files

No meu primeiro job de desenvolvimento de sites de 2013, o site tinha uma página onde o usuário podia enviar um arquivo para meu cliente, no layout o botão para escolher os arquivos eram estilizados, surgiu então a necessidade de personalizar botão Browse Files (input file) do formulário de upload.

Clique aqui e veja o exemplo do botão de upload

Nunca foi meu forte criar layouts, em quase 100% dos meu jobs de desenvolvimento, recebo o layout já pronto de agências/designers, e geralmente são bem estilizados (botões, fonts, lightbox, etc) o que eu acho totalmente válido, além de eles saberem o que estão fazendo, não seria nada bonito um site com layout único, com botões com design de windows né?

Para deixar como eles queriam, pesquisei bastante soluções e a que eu achei mais simples e rápida de implementar e personalizar botão Browse Files (input file) foi usando JQuery o File Style Plugin.

É muito fácil seu uso, vou demonstrar em apenas 3 passos, como é simples personalizar o botão de upload do formulário.

Personalizar botão Browse Files

1º Passo – Download do Plugin

Primeiramente você deve fazer o download do File Style Plugin, clicando aqui, ou na página oficial do plugin.

Depois de efetuado o download, suba seu arquivo (jquery.filestyle.js) para o servidor do seu site, caso seu site não tenha, eu recomendo a criação de uma pasta js onde você deixara todos os arquivos .js usados no projeto.

2º Passo – Colocando o plugin pra funcionar

Você deve chamar o File Style Plugin (jquery.filestyle.js), então basta você adicionar o código abaixo entre as tags <head> </head> ou então na página onde você deseja personalizar botão Browse Files.

Caso você ainda não use JQuery no seu template (se já usa, pode pular esse tópico), insira também a chamada pro JQuery, no exemplo estamos usando a api do Google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Agora pra chamarmos o plugin, devemos inserir o seguinte código (lembrando que a pasta /js foi criada no exemplo)

<script type="text/javascript" src="http://seudominio.com.br/js/jquery.filestyle.js"></script>

3º Passo – Chamando o botão Browse Files personalizado

Onde você quer que o botão seja exibido/alterado basta inserir o seguinte código, nesse exemplo a imagem esta dentro da pasta /img, você deve alterar conforme a pasta e o nome da imagem do botão.

<script type="text/javascript">
jQuery(function ($) {
	$("input[type=file]").filestyle({ 
	image: "http://seudominio.com.br/imagens/anexar.png",
	imageheight : 25,
	imagewidth : 324,
	width : 450,
	top : 10,
	position: 0,
	marginTop: 20,
	backgroundPosition: 0
	});});
</script>

Logo depois insira o input file

<input class="upload" id="upload" type="file" name="upload" size="40" />

O CSS usado no exemplo é o seguinte:

.upload {
    border: 1px solid #CCCCCC;
    height: 20px;
    margin-top: 1px;
}

Clique aqui e reveja o exemplo do botão de upload
Clique aqui e veja o código completo no GitHub
Clique aqui e faça download dos arquivos do exemplo

Edit:

Se você fez o download do arquivo no site oficial do plugin, ao usar o Google Chrome e Internet Explorer, vai notar que ao adicionar um arquivo, o campo de texto coloca automaticamente um C:/fakepath/nome-do-arquivo, pra deixar apenas o nome do arquivo no campo de texto, você deve alterar o filestyle.js, mais ou menos na linha 82, deve substituir:

$(self).bind("change", function() {
filename.val($(self).val());
});

Substitua o código acima, pelo seguinte comando:

$(self).bind("change", function() {
var s = $(self).val().replace(/(c:\\)*fakepath/i, '');
filename.val(s);
});

É isso, agora você já viu como é fácil personalizar botão Browse Files (input file) com jQuery, mãos a obra. Dúvidas, deixe um comentário e espero ter ajudado.

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    10 respostas para jQuery – Personalizar botão Browse Files

    1. Gabriel escreveu em 8 de outubro de 2013

      Não deu certo

    2. admin escreveu em 9 de outubro de 2013

      Pode detalhar melhor sua dificuldade Gabriel? Abraços

    3. fefe escreveu em 5 de dezembro de 2013

      faltou só o exemplo. mas foi util.

    4. admin escreveu em 5 de dezembro de 2013

      Obrigado pela observação, vou ficar mais atento e sempre que possível colocar exemplos. Abraços

    5. Leonardo escreveu em 7 de março de 2014

      O caminho fica “Fakepath”. Não consegui mudar isso.

    6. GUstavo escreveu em 7 de março de 2014

      Apenas uma critica construtiva, muda o fundo do site, esta muito ruim pra ler com esse fundo quadriculado.

      Nem deu vontade de ler o tutorial por isso.

    7. Qcabeca escreveu em 9 de março de 2014

      Olá Leonardo, o post foi atualizado, com essa correção, obrigado.

    8. Qcabeca escreveu em 9 de março de 2014

      Ok Gustavo, vou analisar, mesmo assim obrigado.

    9. Flávio escreveu em 9 de junho de 2014

      Eu baixei seus arquivos e não estão funcionando

    10. Qcabeca escreveu em 9 de junho de 2014

      Olá Flávio, você alterou o arquivo upload.php na linha 7? Onde faz a chamada pro arquivo filestyle.js?

    Envie seu comentário.

    Seu email não será publicado