Customizando <input="file">
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);
});
});
});Discussão (8)
Carregando comentários...