Jump to content

Miniatura em campo file


Carlos Rocha
 Share

Recommended Posts

<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 by carcleo
Link to comment
Share on other sites

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 by carcleo
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.