Ir para conteúdo
Entre para seguir isso  
ebdt

Customizando <input="file">

Recommended Posts

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);
		});
	});
});

Compartilhar este post


Link para o post
Compartilhar em outros sites

Compartilhar este post


Link para o post
Compartilhar em outros sites

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...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Entre para seguir isso  

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.