Customizando <input="file">

[ebdt 0]

e ai... eu customizei meus inputs do tipo file para mostrar um botão personalizado, mas acho que meu JS poderia ser otimizado, se alguém puder ajudar, eis meu código...

$(function(){
        // input que recebe a capa do artigo
	var imgUpload = $('.ico-file');
	var inputFile = $('.input-file');
	var inputFake = $('#input-fake');

        // input que recebe várias imagens (Gl)
	var imgUploadGl = $('.ico-file-gl');
	var inputFileGl = $('.input-file-gl');
	var inputFakeGl = $('#input-fake-gl');

	inputFile.addClass('hide');
	inputFileGl.addClass('hide');

	imgUpload.click(function(){
		inputFile.click().change(function() {
			inputFake.text($(this).val().replace('C:\\fakepath\\', ''));
		});
	});

	inputFake.click(function() {
		inputFile.click().change(function() {
			inputFake.text($(this).val().replace('C:\\fakepath\\', ''));
		});
	});

	// Configuração input[file] de galeria de imagens
	imgUploadGl.click(function(){
		inputFileGl.click().change(function() {
			var numFiles = (($(this)[0].files.length) > 1) ? '<strong>' + $(this)[0].files.length + '</strong> arquivos!' : 'apenas <strong>um</strong> arquivo!';
			inputFakeGl.html('Você selecionou ' + numFiles);
		});
	});

	inputFakeGl.click(function() {
		inputFileGl.click().change(function() {
			// inputFakeGl.text($(this).val().replace('C:\\fakepath\\', ''));
			var numFiles = (($(this)[0].files.length) > 1) ? '<strong>' + $(this)[0].files.length + '</strong> arquivos!' : 'apenas <strong>um</strong> arquivo!';
			inputFakeGl.html('Você selecionou ' + numFiles);
		});
	});
});

[Ted k' 126]

Nem precisa usar JS

 

http://ruancarlos.com.br/Blog/estilizando-input-file-com-css/

http://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/

 

Esse vai mais além

http://cssdeck.com/labs/custom-css-file-upload-form-control

 

Em resumo, não tem necessidade de customizar via JS.

[ebdt 0]

tá, gostei dos exemplos, eu já tinha visto eles, mas se eu quisesse fazer com JS, teria uma forma melhor? acho que sim né? valeu...

[Alaerte Gabriel 662]

Não, não seria melhor, Qual necessidade de utilizar js ?? qual tem mais performance, js ou css ?? não preciso responder né ?

[ebdt 0]

mas e as camadas, estilo, marcação e interação?

[Alaerte Gabriel 662]

CSS meu amigo, se faz praticamente tudo.

[ebdt 0]

mas digo, a aplicação do JS existe, mesmo que mínima... to certo ou não?

[Ted k' 126]

A aplicação existe, mas é muito pouca cara, menos de 200 caracteres!

[ebdt 0]

obrigado a todos que ajudaram...