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.

Recommended Answers

All 3 Replies

Member Avatar for iamthwee

Why is your js file got an php extension?

I am not sure of how to save js file in eclipse software. So I saved it in a script and under php extension.

hi,

If you want to save js file with php extension, then it should be just like this..

 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';
    }
    }

save it as main.js.php . That should do the trick.. joomla uses this a lot it think., but I am sure one of those big content management uses php file extension for the javascript file..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.