0
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 get a preview before the user save.
Profile picture, all right. Already in the background photo, JS generates the visualization, but when I click save, it doesn’t save and ends up disappearing with the photo in the profile. How I specify the file of each photo in files[]?
I tried to put Event as function parameter and call Event, Event.target and nothing worked.
Here is 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 cannot be files[0].
Try changing the name of the variable "file" in
var file=perfil.arquivo.files[0];. There is already an id "file" ininputand this may be generating some conflict.– Sam
This is a form only ? If it is because you have the tags
form?– NoobSaibot
They are two Formulars. Each with an input file.
– Guilherme
You’re not returning any errors ? Make a
debugin each PHP line, example: after theifplacevar_dump($_FILES['arquivo']);and so on.– NoobSaibot
The question is how to select positions in files[]. You know if each input generates an Array files[] or if there is only one Arrau files[] and each input will insert a new element in the msm array ?
– Guilherme
I tried tbm on each function check if files[0]="Undefined" but it didn’t work. In https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications it puts this.files as a function parameter. But I tried using this.files, this.files[0] and nothing tbm
– Guilherme
Have you checked if you’re not taking the same file name?!
– viana
Earlier I tested Alert(file.name); in each function and in 1 input it shows the correct file name, and in 2 input it always shows 'file'. 'file' is in 1 input name='file'. But in 2 input I’m selecting Arq=background.secondplano.files[0]; How it’s taking the input name 1??
– Guilherme
Each input is correctly named. In 2 input I forgot to exchange file for Arq. As I test PHP, pq dar echo or var_dump does not work since JS is not expecting any server response.
– Guilherme