Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 63

Alterar propriedade do input type file usando Javascript

05-01-2011 17:26

Olá a todos...

Estou precisando mudar a propriedade(formatar) do input file do html
mas descobri que não dá pra fazer isso com css

encontrei a seguinte solução com Javascript no site
http://www.quirksmode.org/dom/inputfile.html

Tentei adaptar pra o que eu precisava...não deu certo.
Logo resolvi seguir a risca o tutorial e ainda sim não funciona...no mozila e no explorer quase aparece..ao menos aparece o campo do input..já no google chrome nada.

Não sou boa em javascript...será que alguém pode dizer por que o meu não funcionou??
Segue meu código
<script type="text/javascript"> var W3CDOM = (document.createElement && document.getElementsByTagName); function init() { if (!W3CDOM) return; var fakeFileUpload = document.createElement('div'); fakeFileUpload.className = 'fakefile'; fakeFileUpload.appendChild(document.createElement('input')); var image = document.createElement('img'); image.src='images/botaoAdicionarNovo.png'; fakeFileUpload.appendChild(image); var x = document.getElementsByTagName('input'); for (var i=0;i<x.length;i++) { if (x[i].type != 'file') continue; if (x[i].getAttribute('noscript')) continue; if (x[i].parentNode.className != 'fileinputs') continue; x[i].className = 'file hidden'; var clone = fakeFileUpload.cloneNode(true); x[i].parentNode.appendChild(clone); x[i].relatedElement = clone.getElementsByTagName('input')[0]; if (x[i].value) x[i].onchange(); x[i].onchange = x[i].onmouseout = function () { this.relatedElement.value = this.value; } } } </script> </head> //aqui começa o html <div id="principal"> <h2>Cadastro de foto</h2> <form action="" method="post" name="upload" id="upload" > <h3>Escolha a foto</h3> <h5>Imagem em pjpeg, jpeg, png, gif, bmp.<br /> Tamanho máximo de 50MB. 500x500px.</h5> <div class="fileinputs"> <input type="file" class="file"> </div> <input type="image" id="enviar" name="cadastrar" value="submit" src="images/botaoSalvar.png" /> </form> </div>

Agora o css que está em outro arquivo.css
#fileinputs input { background: url(../images/botaoAdicionarNovo.png) no-repeat 0 -58px; border: none; width: 116px; height: 26px; padding-left: 3px; padding-top: 3px; } #fileinputs { position: relative; height: 30px; width: 300px; } input.file { width: 300px; margin: 0; } input.file.hidden { position: relative; text-align: right; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; z-index: 2; } #fakefile { position: absolute; top: 0px; left: 0px; width: 350px; padding: 0; margin: 0; z-index: 1; line-height: 90%; } #fakefile input { margin-bottom: 5px; margin-left: 0; }

O css já mudei várias vezes..nem mudando os nomes dos campos..nada acontece!O css está sendo chamado corretamente.Mas vi pelo Firebug que o javascript não está sendo executado.

Algúem?? :think:
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17743
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Alterar propriedade do input type file usando Javascript

05-01-2011 17:33

As única alternativa para deixar o input file com estilo diferente é usando Flash.
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 1

Alterar propriedade do input type file usando Javascript

02-03-2011 19:26

Tem esta opção com jQuery bem simples.

http://www.appelsiini.net/projects/filestyle
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17743
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Alterar propriedade do input type file usando Javascript

02-03-2011 19:38

Bem legal essa. Não conhecia.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Bing [Bot]