Your goal is to simulate the logo change, correct?
So I'll use Javascript for
This will be the changed item:
<img width="150" height="auto" src="upload/<? echo $nomeLogo ?>" title="Home"/>
My intention is to allow the user to change this logo, so I will add a pencil icon to the corner of the image and allow the change via Javascript.
After all, why do I process on the server side?
Simulator on client side:
Test this by clicking the link below:
document.getElementById("alterarLogo").addEventListener("change", function() {
document.getElementById('logo').src = window.URL.createObjectURL(this.files[0]);
document.getElementById("salvar").style.display = "block";
});
html {
background-color: #555;
}
/* Isso é apenas para demonstração, mas pode servir como base em seu projeto! */
.logo {
float: left;
border: 1px solid;
border-top-color: rgba(255, 255, 255, 0.3);
border-bottom-color: rgba(255, 255, 255, 0.3);
border-right-color: rgba(255, 255, 255, 0.3);
border-left-color: rgba(255, 255, 255, 0.3);
}
.alterar {
float: left;
margin-left: -21px;
margin-top: 1px;
position: absolute;
background: rgba(255, 255, 255, 0.3);
}
.salvar {
float: left;
line-height: 21px;
padding-left: 10px;
padding-right: 10px;
background: rgba(255, 255, 255, 0.3);
display: none;
cursor: pointer;
}
/* Isso é necessário para ocultar o input, altere para ver o que irá mudar :P */
#alterarLogo,
#salvarLogo {
display: none;
}
<img src="https://goo.gl/XGflc6"width="150" id="logo" class="logo" alt="logo">
<form action="edit_logo-upd.php" method="post">
<label for="alterarLogo">
<img src="https://goo.gl/Kmg0EB"width="20" height="20" class="alterar" alt="Alterar">
</label>
<label for="salvarLogo">
<span class="salvar" id="salvar"> Salvar </span>
</label>
<input name="logo" id="alterarLogo" type="file">
<input name="salvar" id="salvarLogo" type="submit">
</form>
If you prefer, click here .
Construction:
HTML / PHP:
<?php
include "../conexao.php";
//$logo = $_POST['logo']; não vi utilização desta variável.
$query = mysql_query("SELECT * FROM pagcabecalho");
$res = mysql_fetch_array($query);
$logoResultado = $res['logo'];
?>
<img src="upload/<?= $logoResultado ?>" width="150" id="logo" class="logo" alt="logo">
This will display the image normally, as in your code.
So we need to create an alternative to change it when the user uploads an image, this can be done with Javascript + HTML:
<?php
// if(isset($_SESSION['id']) && $_SESSION['id'] == $adminPagina){
// Isso é apenas um exemplo:
// Se estiver logado e o usuário conectado for administrador da respectiva página, exiba as funções:
?>
<form action="edit_logo-upd.php" method="post">
<!-- A função desses "label" é para quando clicar acionar o "input" com o mesmo valor de "id" setado no "for" -->
<label for="alterarLogo">
<img src="https://goo.gl/Kmg0EB"width="20" height="20" class="alterar" alt="Alterar">
</label>
<label for="salvarLogo">
<span class="salvar" id="salvar" style="display: none;"> Salvar </span>
</label>
<!-- Estes inputs estão aqui, com display:none, para que não sejam mostrados -->
<input name="logo" id="alterarLogo" style="display:none;" type="file">
<input name="salvar" id="salvarLogo" style="display:none;" type="submit">
</form>
<?
// }
?>
Javascript:
In order for us to get the image sent by the user and display in the old logo location, we need to add a Javascript:
<script>
document.getElementById("alterarLogo").addEventListener("change", function() {
// Isso irá "monitorar" se houver mudança no input/campo do logo
document.getElementById('logo').src = window.URL.createObjectURL(this.files[0]);
// Isso irá inserir a imagem enviada pelo usuário no lugar do logo antigo
document.getElementById("salvar").style.display = "block";
// Isso irá exibir o botão/texto de salvar.
});
</script>
I think this will be enough for a real preview / simulation, just like Facebook and Twitter, without user having to wait to see the photo / cover and can save if you like. :]
I'm editing an alternative to the server side, using SESSION, although I do not consider it ideal, I'm just needing information on how the image is being saved (to use the same variables).
