Ir para conteúdo

POWERED BY:

Arquivado

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

SHWE12

Selecionar imagem e carregar em div

Por , em Desenvolvimento frontend

Recommended Posts

SHWE12    1

SHWE12
Postado

Bom dia galera, minha dificuldade é o seguinte, quero selecionar uma foto através de um input file e quando selecionar ele, ela carrege em uma div automaticamente, só q nao sei nem como começar a fazer. alguem me ajuda?

abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

SHWE12    1

SHWE12
Postado

ola galera, quase consegui o que eu queria...

<script type="text/javascript">
var carregar;

function abrePagina( img )
{
	carregar = new Image();
	carregar.src = img;
	document.getElementById("sua_div").innerHTML = "Carregando...";
	setTimeout( "verificaCarregamento()", 100 );
}

function verificaCarregamento()
{
	if( carregar.complete )
	{
		document.getElementById("imagem").innerHTML = "<img src=\"" + carregar.src + "\" />";
	}
	else
	{
		setTimeout( "verificaCarregamento()", 100 );
	}
}
</script>

<div id="imagem"></div>
O PROBLEMA ESTA AQUI..... NO ONCHAGE NAO CONSIGO PASSAR O CAMINHO SELECIONADO DA IMAGEM

<input name="foto" type="file" class="texto_manager" id="foto" size="30" onchange="abrePagina('');" />

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Caxito    0

Bruno Caxito
Postado

Cara poste no lugar certo da proxima vez porque aqui é para HTML / CSS voce ta querendo javascript.

 

O meio mais simples de fazer isso que eu pensei foi este, a desvantagem é que a imagem tem q estar no mesmo diretorio deste script (ou em outro diretorio, basta editra o script), no caso de um usuario pegar uma imagem do proprio PC e tentar executar oque voce quer na sua pagina online será impossivel, pois para isso é preciso que o seu script fassa upload da imagem antes. Entao essa função so funciona no seu PC, melhor que isso so com ASP/PHP pra fazer upload da imagem.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
	function mostraImagem() {
		var imagem = document.getElementById("imagem");
		var diretorio = document.getElementById("diretorio").value;
		var teste = diretorio.split("\\");
		imagem.src = teste[3];
	}
</script>
</head>

<body>
	<input type="file" id="diretorio" onchange="mostraImagem()" />
	<img id="imagem" src="" alt="Imagem" />
</body>
</html>

Compartilhar este post

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

Informação importante

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

  Aceito