Ir para conteúdo
Fórum Script Brasil
  • 0

[Dúvida] Input file Personalizado


Alex0007

Pergunta

Queria fazer um input file personalizado como mostrado abaixo.

Untitled-1.png

É 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

  • 0

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

Link para o comentário
Compartilhar em outros sites

  • 0

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

Link para o comentário
Compartilhar em outros sites

  • 0

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:

asdasdsad.png

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 por Alex0007
Link para o comentário
Compartilhar em outros sites

  • 0

Bem achei bem bacana ...

mas quando eu disse IMPOSSIVEL foi que eu disse que estilizar o INPUT TYPE="FILE" é impossivel

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

Link para o comentário
Compartilhar em outros sites

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.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...