Alex0007 Postado Maio 4, 2012 Denunciar Share Postado Maio 4, 2012 Queria fazer um input file personalizado como mostrado abaixo.É que eu preciso poupar espaço para adicionar imagens ao meu site, e preciso que o input tenha 129px e seja elegante com uma imagem de fundo.E que o nome do arquivo selecionado apareça só o nome do arquivo, sem o caminho todo dele.ex: de "C:/xampp/htdocs/image/arquivo.jpg", ser somente : "arquivo.jpg"alguém tem ideia de como faz? Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 ESerra Postado Maio 4, 2012 Denunciar Share Postado Maio 4, 2012 Movendo PHP » HTML. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 dinohills Postado Maio 4, 2012 Denunciar Share Postado Maio 4, 2012 (editado) Bom dia,tente montar sua input assim:<input type="image" src="imagens/foto.png" /> Editado Maio 4, 2012 por dinohills Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 JaguA Postado Maio 4, 2012 Denunciar Share Postado Maio 4, 2012 Dino dessa forma a função FILE da input sera perdida ...Caro Alex007 é com muito pesar que te informo que é IMPOSSIVEL fazer o que está querendo... MASé com prazer que te mostro um jeito de BURLA o sistema.. Bem a ideia é deixar MOCADO o input type="file" atras de um type="text"no caso voc vai Estilizar o Input text que ficara por cima do Input file que estara faendo toda a função que deve ser feito.segue abaixo 2 exemplo para você se basear.http://ruancarlos.com.br/Blog/estilizando-...t-file-com-css/http://imasters.com.br/artigo/11887/css/css_no_input_file/monte ai o seu, qualquer duvida so pergunta.. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Alex0007 Postado Maio 4, 2012 Autor Denunciar Share Postado Maio 4, 2012 Bem obrigado a todos, JaguA eu já vi esses exemplo e eles são muito largos, já que é impossivel fazer com css, seria possivel esconder o input file, e colocar um background por traz e usar uma funçao java para puxar o nome do arquivo selecionado?Seria bem útil Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Alex0007 Postado Maio 4, 2012 Autor Denunciar Share Postado Maio 4, 2012 (editado) JaguA, acho que acabei de fazer o "impossivel" ^_^ Olha só o seguinte, eu peguei este exemplo que você me passou e o adaptei. Ficou o seguinte<html><head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>input file</title> </head><body> <style type="text/css"> #imgfundo {background: url("upimg.png") no-repeat; width:129px; height:56px; } .realupload {width:129px; height:56px; opacity:0.0; -moz-opacity: 0.0; filter: alpha(opacity = 0);} .fakeupload {width:129px;} </style> <form enctype="text/plain"> <label>Upload de arquivo:</label> <div id="imgfundo" class=""> <input type="file" class="realupload" name="FileUpload" onchange="this.form.fakeupload.value = this.value;"> </div> <input id="fakeupload" name="fakeupload" class="fakeupload" type="text" readonly> </form> </body></html>Visualização:O que eu fiz foi definir o tamanho do imput em 129px por 56px e adicionar uma opacidade nula.aí na div "imgfundo" eu coloquei um background do mesmo tamnho das proporçoes difinidas,e depois usei um campo de texto para enviar o nome do arquivo escolhido para ele, e coloquei ele como somente leitura.e ficou exatamente como eu queria. ;) Então, não se esqueçam, no PHP nada é impossivel!Obrigado a todos. Editado Maio 4, 2012 por Alex0007 Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 JaguA Postado Maio 4, 2012 Denunciar Share Postado Maio 4, 2012 Bem achei bem bacana ...mas quando eu disse IMPOSSIVEL foi que eu disse que estilizar o INPUT TYPE="FILE" é impossivelvocê fez a mesma coisa que eu disse ou seja burlo o sistema fez uma gambiarra eu achei muito interessante a forma que você fez...so não entenda errado o que eu quis dizer ...PS: isso é HTML / CSS e não PHP. Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
Alex0007
Queria fazer um input file personalizado como mostrado abaixo.
É que eu preciso poupar espaço para adicionar imagens ao meu site, e preciso que o input tenha 129px e seja elegante com uma imagem de fundo.
E que o nome do arquivo selecionado apareça só o nome do arquivo, sem o caminho todo dele.
ex: de "C:/xampp/htdocs/image/arquivo.jpg", ser somente : "arquivo.jpg"
alguém tem ideia de como faz?
Link para o comentário
Compartilhar em outros sites
6 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.