Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

brshare

Previsualizar imagem de um campo input do tipo file

Por , em Javascript

Recommended Posts

brshare    0

brshare
Postado

Ola como fazer em java script para previsualizar uma imagem selecionada em um campo do tipo file?

 

<input type="file" size="20" onChange=""><img src="">
quero que ao selecionar uma imagem no campo tipo file altere a propriedade src de img. Seria isso para previsualizar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Void :    0

Void :
Postado

meio dificil fazer isso ae só com js, vai ter que rolar um esquema de upload ...moveram sua dúvida para o lugar incorreto, seria interessante você postar no subforum de ajax

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

Void:,

 

desculpe mas nao está certo o que você escreveu

 

veja um exemplo:

 

<html><head><title>imagem</title><script language="javascript">function setar_obj(eln){	if(document.all){	return document.all[eln];	}else{		if(document){		return document[eln];		}else{		return getElementById(eln);		}	}}function abrir(v){	//alert(v); // usado para testes	lmnt = "imagem";		// ID do elemento IMG	obj  = setar_obj(lmnt); // obtendo source Id do elemento	obj.src = v;			// atribui o valor do elemento file para o elemento img }function tam2(){	lmnt = "imagem";		 // ID do elemento IMG	obj  = setar_obj(lmnt);  // obtendo source Id do elemento	largura = obj.width;	 // obtém largura	altura  = obj.height;	// obtém altura	lmnt = "tamimg";		 // ID do elemento IMG	obj  = setar_obj(lmnt);  // obtendo source Id do elemento		obj.value  = 'largura: '+largura+' pixels'; // atribui largura	lmnt = "tamimg2";		// ID do elemento IMG	obj  = setar_obj(lmnt);  // obtendo source Id do elemento		obj.value = 'altura: '+altura+' pixels';	// atribui altura}</script></head><body bgcolor=ffffff text=000000><center><table width=100% height=100%><tr><td align=center valign=middle><font face=verdana size=2 color=000000><form name='form1' id='form1'><input name='file' type=file size=15 label='aki'><input type='button' name='envia' id='envia' value='abrir' onclick="java script:abrir(file.value);"><p><img src='http://imasters.japancase.com/sobrevivencia_b.jpg' name='imagem' id='imagem' border='0' alt="imagem aqui"></form><hr><input type='button' value='dimensões' onclick="java script:tam2();"><br><input type="text" name="tamimg" id="tamimg" size="18" style="border-left:0px; border-top:0px; border-bottom:0px; border-right:0px; background-color:ffffff; color:ff0000; font-family:verdana; font-size:11px;" value="" readonly><input type="text" name="tamimg2" id="tamimg2" size="18" style="border-left:0px; border-top:0px; border-bottom:0px; border-right:0px; background-color:ffffff; color:ff0000; font-family:verdana; font-size:11px;" value="" readonly></td></tr></table></center></body></html>

rss

 

acho o tmferreira postou enquanto eu fazia

Compartilhar este post

Link para o post
Compartilhar em outros sites

brshare    0

brshare
Postado

Não é difícil de fazer não, Void :. E nem precisa de AJAX.

 

<script>function mostra() {	var file = document.getElementById('arquivo').value;	document.getElementById('img').setAttribute('src', file);}</script><input type="file" id="arquivo" onchange="mostra()" /><img src="" id="img" />
gostei desse script. facil entendimento . Bom agora adapta-lo; Supondo q seja uma imagem de dimensoes grandes 800x600 quero mostrar mais reduzido, não precisa ser thumb somente setar o atributo width e height da imagem de tamanho proporcional so que reduzido. Caso a imagem possua dimensoes inferiores a 200 x 200 , o atributo width e heigth recebera o tamanho da imagem.

 

alquem poderia modificar este js com estes requisitos ???

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito