I have 2 input file, one to select the profile photo and the other to choose a background photo. Each photo has different dimensions and I generate a preview before the user saves.
In the profile photo, all right. already in the background photo, the JS generates the visualization, but when I click save, it does not save and ends up disappearing with the photo in the profile. How do I specify the file of each photo in files []?
I have tried to put event as function parameter and call event, event.target and nothing worked.
Here's my code:
<?php
require "conexao.php";
if(!isset($_SESSION)) {
session_start();
}
$idu = $_SESSION ['idu'];
if (isset($_FILES['arquivo'])) {
$extensao = strtolower(substr($_FILES['arquivo']['name'], -4));
$novo_nome = md5(time()).$extensao;
$diretorio = "uploads/";
move_uploaded_file($_FILES['arquivo']['tmp_name'], $diretorio.$novo_nome);
$sql=mysqli_query($con,"UPDATE bancodados SET foto='$novo_nome' WHERE id='$idu'");
}
if (isset($_FILES['segundplano'])) {
$extensao = strtolower(substr($_FILES['segundplano']['name'], -4));
$novo_nome = md5(time()).$extensao;
$diretorio = "uploads/";
move_uploaded_file($_FILES['segundplano']['tmp_name'], $diretorio.$novo_nome);
$sql=mysqli_query($con,"UPDATE bancodados SET imagemfundo='$novo_nome' WHERE id='$idu'");
}
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Editar Perfil</title>
<link rel="stylesheet" type="text/css" href="css/editar-perfil.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function visualizacao(){
var target=document.getElementById("target");
var file=perfil.arquivo.files[0];
var reader= new FileReader();
reader.onloadend=function (){
target.src=reader.result;
document.images['target'].width = 150;
};
if(file){
reader.readAsDataURL(file);
} else {
target.src="imagens/usuario.jpg";
}
}
function panofundo(){
var alvo=document.getElementById("ft-bg");
var arq=background.segundplano.files[0];
var reader= new FileReader();
reader.onloadend=function (){
alvo.src=reader.result;
document.images['ft-bg'].height = 300;
};
if(arq){
reader.readAsDataURL(arq);
} else {
alert("falha na leitura do arquivo");
alvo.src="imagens/possib-conex.jpg";
}
}
</script>
</head>
<body>
<div id="painel">
<a class="voltar" href="perfil.php?id=<?php echo $idu; ?>" title="Voltar"><img src="imagens/voltar.jpg" alt="Voltar"></a>
<a class="sair" href="logout.php" title="Sair"><img src="imagens/sair.jpg" alt="Sair"></a>
</div>
<div id="container">
<div id="ftperfil">
<h1>Foto do perfil</h1>
<div id="foto">
<?php require "query-idu.php"; ?>
<figure>
<img id="target" src="<?php echo $imagem; ?>" alt="Foto de Perfil" width="150"/>
</figure>
</div>
<form name="perfil" action="editar-perfil.php" method="post" enctype="multipart/form-data">
<label for="file">Escolher foto</label>
<label for="salvarft">Salvar</label>
<input type="file" id="file" name="arquivo" onchange="visualizacao()"/>
<input id="salvarft" type="submit" value="Salvar"/>
</form>
</div>
<div id="fundo">
<h1>Imagem segundo plano</h1>
<div id="bg">
<?php require "query-idu.php"; ?>
<figure>
<img id="ft-bg" src="<?php echo $ftfundo; ?>" alt="Foto de Perfil" height= "300"/>
</figure>
</div>
<form name="background" action="editar-perfil.php" method="post" enctype="multipart/form-data">
<label class="img-bg" for="ftfundo">Escolher foto</label>
<label class="img-bg" for="salvarft">Salvar</label>
<input type="file" id="ftfundo" name="segundplano" onchange="panofundo()"/>
<input id="salvarfundo" type="submit" value="Salvar"/>
</form>
</div>
</div>
</body>
</html>In this case, both JS functions can not be files [0].