Editar visual do input file

[Bernardo Dias da Cruz 0]

Olá a todos, eu procurei de diversas formas descobrir como editar o visual de um campo de formulário do tipo FILE, mas não consegui, gostaria de saber se alguem sabe como faz.

 

Estou querendo fazer o seguinte: no lugar do botão do input, quero colocar uma imagem, e no formulário um estilo.

 

Isso parece ser bizarro, porque não consegui encontrar solução em lugar nenhum. Chegam a oferecer até mesmo flash..

 

Bom, desde já agradeço se puderem me ajudar.

[cassiano óliver 1]

cara, pelo que já vi aqui mesmo no fórum, acho que isso ainda não é possível...

[Bernardo Dias da Cruz 0]

Mas será que não existe nenhuma forma? Nem usando um input text e outro input image?

Talvez assim funcione com algum javascript, porém não tenho ideia como abrir uma caixa de arquivo por um link image..

hmmmm.. complicado...

[webflex 0]

Olá,

 

Amigo não sei se este exemplo lhe serve: Link

 

Cumps \o/

[Bernardo Dias da Cruz 0]

Bacana o link, mas estilo em botão submit não é mistério... mistério mesmo é a joça do FILE.. hehehe http://forum.imasters.com.br/public/style_emoticons/default/skull.gif

[webflex 0]

Olá,

 

Peço desculpa, não tinha percebido que era do file :P.

Aguarde uma resposta, talvez alguém saiba ;).

 

Cumps \o/

[Bernardo Dias da Cruz 0]

É isso ai... O mistério está desvendado!

 

http://www.shauninman.com/archive/2007/09/...css_and_the_dom

 

Aqui tem um Ajax que funciona bem, do jeito que eu queria, e acho que vai ser útil pra muita gente.

 

Valeu pela ajuda galera. Espero ter ajudado tambem.

 

Abraço

[Bernardo Dias da Cruz 0]

Só para constar, também achei este método:

 

http://www.michaelmcgrady.com/file_browse_images.jsp

 

Ainda não testei qual deles é melhor, mas este segundo pelo menos retorna o arquivo escolhido, o que o outro não fazia.

 

o/

[Bernardo Dias da Cruz 0]

hehehe melhor ainda, da pra usar os dois juntos, digamos, o primeiro funciona melhor, pois ele usa a imagem diretamente no botão do input file, ai não tem bagunça de um sobre o outro usando position: aboslute, coisa que dependendo do caso nao dá.. entao voce coloca um outro input text com usando as funções de onKeyUp e onMouseOut no input file chamando a função js que irá inserir o valor do file no text.. simples..

 

o unico defeito é que usando a tecla tab, você pode focar no campod e texto do input oculto.. e digitar.. hehehe mas fora isso, funciona bem..

 

ótima gambiarra!

[webflex 0]

Olá,

 

Fico feliz por ter resolvido seu problema e ter postado para posterior ajuda para outros utilizadores. É esse o espirito ;).

Força ai.

 

Cumps \o/

[Myfault 0]

Bom, tambem estou com esse problema e resolvi com o primeiro link, mas o segundo nao quer abrir e nao consigo colocar o valor em um input text alguem podeme ajudar?

[FernandoPhP 9]

não entendi qual é o problema

[JohnatanMaciell 0]

hahaha eu sei uma forma com javascript ..

 

joga esse Script aee e não esquece de estar chamando o JQuery!

(function($){$.fn.bootstrapFileInput=function(){this.each(function(i,elem){var $elem=$(elem);if(typeof $elem.attr('data-bfi-disabled')!='undefined'){return;}
var buttonWord='Enviar curriculo';if(typeof $elem.attr('title')!='undefined'){buttonWord=$elem.attr('title');}
var className='';if(!!$elem.attr('class')){className=' '+$elem.attr('class');}
$elem.wrap('<a class="file-input-wrapper btn btn-default '+className+'"></a>').parent().prepend($('<span></span>').html(buttonWord));}).promise().done(function(){$('.file-input-wrapper').mousemove(function(cursor){var input,wrapper,wrapperX,wrapperY,inputWidth,inputHeight,cursorX,cursorY;wrapper=$(this);input=wrapper.find("input");wrapperX=wrapper.offset().left;wrapperY=wrapper.offset().top;inputWidth=input.width();inputHeight=input.height();cursorX=cursor.pageX;cursorY=cursor.pageY;moveInputX=cursorX-wrapperX-inputWidth+20;moveInputY=cursorY-wrapperY-(inputHeight/2);input.css({left:moveInputX,top:moveInputY});});$('body').on('change','.file-input-wrapper input[type=file]',function(){var fileName;fileName=$(this).val();$(this).parent().next('.file-input-name').remove();if(!!$(this).prop('files')&&$(this).prop('files').length>1){fileName=$(this)[0].files.length+' files';}
else{fileName=fileName.substring(fileName.lastIndexOf('\\')+1,fileName.length);}
if(!fileName){return;}
var selectedFileNamePlacement=$(this).data('filename-placement');if(selectedFileNamePlacement==='inside'){$(this).siblings('span').html(fileName);$(this).attr('title',fileName);}else{$(this).parent().after('<span class="file-input-name">'+fileName+'</span>');}});});};var cssHtml='<style>'+'.file-input-wrapper { overflow: hidden; position: relative; cursor: pointer; z-index: 1; }'+'.file-input-wrapper input[type=file], .file-input-wrapper input[type=file]:focus, .file-input-wrapper input[type=file]:hover { position: absolute; top: 0; left: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); z-index: 99; outline: 0; }'+'.file-input-name { margin-left: 8px; }'+'</style>';$('link[rel=stylesheet]').eq(0).before(cssHtml);})(jQuery);

[JohnatanMaciell 0]

Depois de adicionar esse código, seu input file vai ficar como uma estrutura possível de manipular com CSS, basta inspecionar o elemento e verá como estiliza-lo.

 

Espero te ajudado ! =D