Exibir imagem na tela sem refresh formulário

[cristianomg 0]

Pessoal blz,

 

Tenho dois campos onde salvo um texto num Input type="text" e o endereço da imagem que seleciono segue o código:

<form action="controllers/publicar_linha_tempo_minha.php" method="post" enctype="multipart/form-data">
	   <?php  //consulta sql que nao vem ao caso ?>
 <div id="texto_publicacao" class="col-xs-6 animated" data-animation="fadeInLeft" data-animation-delay="300">
	<textarea name="message_publicacao" id="message" class="form text_publica light requiredField ff-cf-message message_publicacao"  placeholder="Descreva algo...para uma nova publicação."></textarea>
</div>

<div id="btn_publicar_nova" class=" fullwidth col-xs-12 animated" data-animation="fadeInLeft" data-animation-delay="300">
	<!-- CADASTRA NO BANCO AS INFORMAÇÕES COM O ENDEREÇO DA IMAGEM E FAZ UPLOAD DELA NUMA PASTA  -->
	<div id="btn_01"><input type="submit" value="Publicar"></div>
	<div id="btn_02">
<span class="upload-wrapper" >
//CHAMA E ABRE A FOTO PARA SELECIONAR
<input class="upload-file" type="file" name="foto_perfil[]"  value="cadastros\imagens\fotoPerfil\" alt="Publicar uma imagem." title="Publicar uma imagem."  enctype="multipart/form-data"//>
						<img class="upload-button" alt="Publicar uma imagem." title="Publicar uma imagem." src="cadastros\imagens\icones\foto.jpg" />
						</span>
					</div>
				</div>
			</form>

FAZENDO O UPLOAD

<?php
    include "..\include\conn.php"; 
		
		 $id_logado  = $_POST['id'];
		 $publicacao	 = strtoupper($_POST['message_publicacao']);
		 $Fotos  = $_FILES['foto_perfil'];

			$limite = 1; //quantidade de fotos de limite
		for($i = 0; $i < $limite; $i++){
				$Nome    = $Fotos['name'][$i];
				$Tamanho = $Fotos['size'][$i];
				$Tipo    = $Fotos['type'][$i];
				$Tmpname = $Fotos['tmp_name'][$i];
		if($Tamanho > 0 && strlen($Nome) > 1){
			if(preg_match('/^image\/(gif|jpeg|jpg|png)$/', $Tipo))
				{
				$Destino = 'imagens/publicacoes/'.$Nome;
				$Caminho = '../imagens/publicacoes/'.$Nome;
				// Tudo OK! Move o upload!
			if(move_uploaded_file($Tmpname, $Caminho)){
				echo 'Foto #' . ($i+1) . ' enviada.<br/>';
				} else // Erro no envio
				{
				echo 'Não foi possível enviar a foto #' . ($i+1) . '<br/>';
				}
			}
		}
	}

?>

Eu não sei como poderia fazer para mostrar a imagem seleciona numa Div sem ter de acionar o submit do formulario. Andei lendo que com o javascript é possível tentei de varias formas e NÂO consegui .

sed alguem tiver um post de exemlpo...ageradeço.

 

[William Bruno 1501]

Vc quer fazer um upload com ajax?

http://wbruno.com.br/ajax/upload-de-arquivos-e-dados-com-ajax/

 

Troque o retorno por um append() da imagem.

o xhr.upload é só para xhr2 (o Firefox implementa)