Carlos Rocha Posted December 15, 2015 at 06:31 PM Report Share #590715 Posted December 15, 2015 at 06:31 PM (edited) <input type="file" name="arquivo"> Tenho o campo acima que carrega uma imagem a ser uplodeada, Ao selecionar uma figura, seu nome aparece a´direita mas gostaria também que aparecesse também uma miniatura. É que estou usando o plugin elevateZoom do JQuery. Mas para isso, é necessário que se tenha uma imagem. Encontrei esse código na web mas não funcionou corretamente; <html> <script language="Javascript"> function image(dir) { alert(dir); document.teste.imagem.src=dir } </script> <body> <form name=teste> <img src="" name="imagem" width="200" height="200"><br> <input type="file" name="arquivo"><br> <input type="submit" value="Submeter" name="B1"> </body> </html> Algum outro recurso? Edited December 15, 2015 at 06:34 PM by carcleo Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted December 15, 2015 at 06:46 PM Report Share #590716 Posted December 15, 2015 at 06:46 PM o que queres dizer com "miniatura" ? IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
Carlos Rocha Posted December 15, 2015 at 08:06 PM Author Report Share #590717 Posted December 15, 2015 at 08:06 PM fazer aparecer também a imagem ao lado do input file e não só o nome da imagem. Nesse caso, apenas setar sua altura para 40px; Assim, posso fazer o zoom dela depois usando o plugin do JQuery Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted December 15, 2015 at 08:57 PM Report Share #590718 Posted December 15, 2015 at 08:57 PM olha que o elevatezoom (ou outro tipo qualquer de zoom) não faz crop da imagem é somente um método de "parecer" fazer zoom de uma imagem, mais nada. tens a noção disso ? IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
Carlos Rocha Posted December 15, 2015 at 11:56 PM Author Report Share #590730 Posted December 15, 2015 at 11:56 PM claro. Mas sem ter uma imagem, não há como fazer zoom! Preciso que, ao escolher uma imagem no input File, além do nome da imagem aparca também a imagem. Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted December 16, 2015 at 12:11 AM Report Share #590731 Posted December 16, 2015 at 12:11 AM como queiras : https://www.portugal-a-programar.pt/topic/57887-administracao-de-loja/?do=findComment?comment=487204 IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
Carlos Rocha Posted December 16, 2015 at 10:32 AM Author Report Share #590737 Posted December 16, 2015 at 10:32 AM (edited) Obrigado, consegui uma mais simples (rsrs, acho!) <label class="labelPequeno">Imagem</label> <input type="file" class="typeTextMedio" id="imagem" name="imagem" /> <img id="preview" class="elevate-image" height="40px" /> <script> function readImage() { if (this.files && this.files[0]) { var file = new FileReader(); file.onload = function(e) { document.getElementById("preview").src = e.target.result; }; file.readAsDataURL(this.files[0]); } } document.getElementById("imagem").addEventListener("change", readImage, false); </script> http://jsfiddle.net/VzfJd/4/ Porém estou enfrentando um problema. A imagem esta sendo carregada. Mas parece que pelo caso de o path ter sido escolhido após o carregamento da página, o zoom não esta sendo aplicado. O zoom é chamado pela classe class="elevate-image" . Algum recurso? Edited December 16, 2015 at 10:46 AM by carcleo Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now