Chanced upon a youtube tutorial and decided to try out.
When user hovers over to the image, he should be able to click on “Toggle avatar image” choose an image that he wants to change to. However, the “browse” and “upload” buttons are not appearing when I clicked on “Toggle avatar image”. May I know which part of my code went wrong?
user.php
<?php
include ('connect.php');
// Initialize any variables that the page might echo
$userid = "";
$image = "";
$profile_pic = "";
$profile_pic_btn = "";
$avatar_form = "";
// Make sure the _GET username is set, and sanitize it
if(isset($_GET["userid"])){
$userid = preg_replace('#[^a-z0-9]#i', '', $_GET['userid']);
}
// Select the member from the users table
$sql = "SELECT * FROM userprofile WHERE user_id='$userid' AND image = '$image'";
$user_query = mysql_query($sql) or die($sql."<br /><br />".mysql_error());
$profile_pic_btn = '<a href="#" onclick="return false;" onmousedown="toggleElement(\\'avatar_form\\')">Toggle Avatar Form</a>';
$avatar_form = '<form id="avatar_form" enctype="multipart/form-data" method="post" action="photo_system.php">';
$avatar_form .= '<h4>Change your avatar</h4>';
$avatar_form .= '<input type="file" name="avatar" required>';
$avatar_form .= '<p><input type="submit" value="Upload"></p>';
$avatar_form .= '</form>';
// Fetch the user row from the query above
while ($row = mysql_fetch_array($user_query)) {
$userid = $row["user_id"];
$image = $row["image"];
}
$profile_pic = '<img src="avatars/'.$userid.'/'.$image.'" alt="'.$userid.'">';
if($image == NULL){
$profile_pic = '<img src="avatars/avatardefault.png">';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php echo $userid; ?></title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style/style.css">
<style type="text/css">
div#profile_pic_box{float:right; border:#999 2px solid; width:200px; height:200px; margin:20px 30px 0px 0px; overflow-y:hidden;}
div#profile_pic_box > img{z-index:2000; width:200px;}
div#profile_pic_box > a {
display: none;
position:absolute;
margin:140px 0px 0px 120px;
z-index:4000;
background:#D8F08E;
border:#81A332 1px solid;
border-radius:3px;
padding:5px;
font-size:12px;
text-decoration:none;
color:#60750B;
}
div#profile_pic_box > form{
display:none;
position:absolute;
z-index:3000;
padding:10px;
opacity:.8;
background:#F0FEC2;
width:180px;
height:180px;
}
div#profile_pic_box:hover a {
display: block;
}
</style>
<script src="main.js.php"></script>
</head>
<body>
<div id="pageMiddle">
<div id="profile_pic_box"><?php echo $profile_pic_btn; ?><?php echo $avatar_form; ?><?php echo $profile_pic; ?></div>
<h2><?php echo $userid; ?></h2>
<p>Gender: </p>
</div>
</body>
</html>
photo_system.php
<?php
if (isset($_FILES["avatar"]["name"]) && $_FILES["avatar"]["tmp_name"] != ""){
$fileName = $_FILES["avatar"]["name"];
$fileTmpLoc = $_FILES["avatar"]["tmp_name"];
$fileType = $_FILES["avatar"]["type"];
$fileSize = $_FILES["avatar"]["size"];
$fileErrorMsg = $_FILES["avatar"]["error"];
$kaboom = explode(".", $fileName);
$fileExt = end($kaboom);
list($width, $height) = getimagesize($fileTmpLoc);
if ($width < 10 || $height < 10) {
echo "That image has no dimensions.";
exit();
}
$db_file_name = rand(100000000000,999999999999).".".$fileExt;
if($fileSize > 1048576) {
echo "Your image file was larger than 1mb";
exit();
} else if (!preg_match("/\\.(gif|jpg|png)$/i", $fileName) ) {
echo "Your image file was not jpg, gif or png type";
exit();
} else if ($fileErrorMsg == 1) {
echo "An unknown error occurred";
exit();
}
$sql = "SELECT image FROM userprofile WHERE user_id='$userid'";
$query = mysql_query($sql);
$row = mysql_fetch_row($query);
$avatar = $row[0];
if($avatar != ""){
$picurl = "avatars/$username/$avatar";
if (file_exists($picurl)) { unlink($picurl); }
}
$moveResult = move_uploaded_file($fileTmpLoc, "avatars/$userid/$db_file_name");
if ($moveResult != true) {
echo "File upload failed";
exit();
}
include_once("image_resize.php");
$target_file = "avatars/$userid/$db_file_name";
$resized_file = "avatars/$userid/$db_file_name";
$wmax = 200;
$hmax = 300;
img_resize($target_file, $resized_file, $wmax, $hmax, $fileExt);
$sql = "UPDATE userprofile SET avatar='$db_file_name' WHERE user_id = '$userid'";
$query = mysql_query($sql);
mysql_close($sql);
header("location: user.php?u=$userid");
exit();
}
?>
image_resize.php
<?php
function img_resize($target, $newcopy, $w, $h, $ext) {
list($w_orig, $h_orig) = getimagesize($target);
$scale_ratio = $w_orig / $h_orig;
if (($w / $h) > $scale_ratio) {
$w = $h * $scale_ratio;
} else {
$h = $w / $scale_ratio;
}
$img = "";
$ext = strtolower($ext);
if ($ext == "gif"){
$img = imagecreatefromgif($target);
} else if($ext =="png"){
$img = imagecreatefrompng($target);
} else {
$img = imagecreatefromjpeg($target);
}
$tci = imagecreatetruecolor($w, $h);
// imagecopyresampled(dst_img, src_img, dst_x, dst_y, src_x, src_y, dst_w, dst_h, src_w, src_h)
imagecopyresampled($tci, $img, 0, 0, 0, 0, $w, $h, $w_orig, $h_orig);
imagejpeg($tci, $newcopy, 84);
}
?>
main.js.php
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF=8">
<script>
function _(x){
return document.getElementById(x);
}
function toggleElement(x){
var x = _(x);
if(x.style.display == 'block'){
x.style.display = 'none';
}else{
x.style.display = 'block';
}
}
</script>
</head>
</html>
I have tried out the codes and however, when I hover over the image and click on “Toggle Avatar Form”, the form to update my image does not appear. I want to know which part of my code is not working and causing the avatar form to not appear. I am wondering if it is the main.js.php that is causing the problem. Am I suppose to replace the ‘x’??
Would appreciate if some comments are given! I am trying to learn from the YT tutorials.