PHP Upload de imagens sem atualizar pagina

JonathanCruz · 24 de junho de 2019

Olá a todos, desde já agradeço por estarem aqui!

Meu problema é o seguinte:

Quero exibir em um elemento "img", uma foto que eu selecione no meu computador, o código que fiz esta funcionado bem, eu consigo fazer o upload da imagem normalmente, o arquivo é copiado e renomeado na pasta que quero normalmente, mas quando vou tentar fazer o mesmo procedimento sem atualizar a pagina ele carrega a imagem carregada anteriormente, o arquivo na pasta é substituído normalmente, mais na pagina mostra a primeira foto, como se estivesse no cash no computador, só funciona se o usuário der refresh na pagina!

obs.: já inseri tags e códigos no html e no php para o navegador não salvar os arquivos no cash

segue o código html e javascript

<!DOCTYPE html>
<html>
<head>
	<title>upload</title>

	<script src="_javascript/jquery-min.js"></script>
</head>
<body>

	<script type="text/javascript">
		function uploadFoto(){

			document.getElementById('img').src = '';

			var data = new FormData();
		    data.append('arquivo', $('#arquivo')[0].files[0]);
		    
		    $.ajax({
		    	url: '_classesPHP/salvarfototemp.php',
		        data: data,
		        processData: false,
		        contentType: false,
		        type: 'POST',
		        success: function(data){
					document.getElementById('img').src = '_temporario/fototemporaria';
		    	}	
			});
		}
	</script>

	<form>
		<form id="formulariofoto">    
            <input type="file" id="arquivo" onChange="uploadFoto()"/>
		</form>

		<div id="mostrarImg">
			<img id="img" style="height:35vh; width:16vw; background-color: #ccc;"/>
		</div>
	</form>
</body>
</html>

agora o código da pagina php

<?php

	if(isset($_FILES['arquivo'])){

		$novo_nome = 'fototemporaria';
		$diretorio = "../_temporario/";
		
		unlink("../_temporario/fototemporaria");
		move_uploaded_file($_FILES['arquivo']['tmp_name'], $diretorio.$novo_nome);
	};
	
?>

JonathanCruz · 24 de junho de 2019

Problema resolvido.

Esse problema só estava acontecendo porque o arquivo tinha o mesmo nome.

Eu fiz com que a copia recebesse o mesmo nome do arquivo original, e quando inicia a função apaga todos os arquivos existentes no diretório!

segue o código atualizado:

codigo HTML:

<!DOCTYPE html>
<html>
<head>
	<title>upload</title>
	<script src="_javascript/jquery-min.js"></script>
</head>
<body>
	<script type="text/javascript">
		function uploadFoto(){	
			var data = new FormData();
		    data.append('arquivo', $('#arquivo')[0].files[0]);

		    $.ajax({
		    	url: '_classesPHP/salvarfototemp.php',
		        data: data,
		        processData: false,
		        contentType: false,
		        type: 'POST',
		        dataType:'json',
		        success: function(data){
					document.getElementById('img').src = '_temporario/'+data.arquivo.name;
		    	}	
			});

		};

	</script>

	<form>
		<form id="formulariofoto">    
            <input type="file" id="arquivo" onChange="uploadFoto()"/>
		</form>

		<div id="mostrarImg">
			<img id="img" style="height:35vh; width:16vw; background-color: #ccc;"/>
		</div>
	</form>
</body>
</html>

Código PHP:

<?php

	if(isset($_FILES['arquivo'])){ //verifica se recebeu algum arquivo

		$diretorio = "../_temporario/"; //indica o diretorio onde vai ser salvo

		if(is_dir($diretorio)){ //verifica se é um diretorio
			$localPasta = dir($diretorio); //classifica variavel como sendo um objeto do tipo diretorio

		  	while($arquivo = $localPasta->read()){ //faz um loop ate não ter mais nenhum arquivo na pasta 
				if(($arquivo != '.') && ($arquivo != '..')){ //verifica se tem algum arquivo na pasta
				  unlink($diretorio.$arquivo); //deleta o arquivo se existir
				}
			}
			$localPasta->close(); //limpa o objeto
		}
   	
		$arquivoSelecionado = $_FILES['arquivo']; //grava na variavel o arquivo selecionado na pagina
		
		//move para o diretorio com o nome original do arquivo selecionado
		move_uploaded_file($_FILES['arquivo']['tmp_name'], $diretorio.$arquivoSelecionado['name']);
		
		$rows = array('arquivo' => $arquivoSelecionado,); //faz um array para levar o nome original do arquvio de volta pro javascript
		echo json_encode($rows); //envia o nome original para o javascript
	};
	
?>