I want to show my users profile picture when the sign in . When they click the change profile picture button, their picture gets saved into the directory and then the database . I don't know where to start. How do I show whatever picture the user has, as their profile picture ?

profile.php:

<form id="form2" action="upload.php" method="post" enctype="multipart/form-data">
<p id="p1">Change profile picture:</p> <br />
<input type="file" name="fileToUpload" id="fileToUpload"><br />
<br><input id="sub1" type="submit" value="Change profile picture" name="change"><br />
</form>

<!-- Trigger the Modal -->
<img id="myImg" src="default.jpg" width="200" height="150">

EDIT!!!!

<?php
$username = $_SESSION['username'];

if(isset($_FILES['image'])){
$errors= array();
$file_name = $_FILES['image']['name'];
$file_size = $_FILES['image']['size'];
$file_tmp = $_FILES['image']['tmp_name'];
$file_type = $_FILES['image']['type'];
$file_ext=strtolower(end(explode('.',$_FILES['image']['name'])));

$extensions= array("jpeg","jpg","png");

if(in_array($file_ext,$extensions)=== false){
 $errors[]="extension not allowed, please choose a JPG, JPEG or PNG file.";
}

if($file_size > 2097152) {
 $errors[]='File size must be 2 MB';
}

 if(empty($errors)==true) {
 move_uploaded_file($file_tmp,"images/uploads/".$file_name);

$store=mysqli_query($conn,"UPDATE users SET userPic='$userPic' WHERE username='$username'");
mysqli_query($conn,$store);
 echo "Success";
}else{
 print_r($errors);
 echo"it failed";
}
}
?>

<?php
$getimg = mysqli_query($conn,"SELECT userPic FROM users WHERE username='" . 
$username . "'");
$rows=mysqli_fetch_array($getimg);
$img = $rows['userPic'];

?>



<img id="myImg" src="images/uploads/<?php echo $img?>"  alt="<?php echo $img ?>" width="200" height="150">

Ok so my first question is do you use a database of some sort. If you do create a field inside the users table called "avatar" this is where we will store the filename. Secondly in your localhost directory create a file called "uploads" inside here we will store the file names for the pictures. Secondly do you have sessions? If so i have defined the session as $user so change that to fit your sessions. Then simply add this code. I have it all in the same file but you can make it a separate file if you'd like.

<?php
    $servername = "localhost";
    $username = "";
    $password = "";
    $database = "";

    // Create connection
    $conn = mysqli_connect($servername, $username, $password, $database);

$user = $_SESSION['username'];

   if(isset($_FILES['image'])){
      $errors= array();
      $file_name = $_FILES['image']['name'];
      $file_size = $_FILES['image']['size'];
      $file_tmp = $_FILES['image']['tmp_name'];
      $file_type = $_FILES['image']['type'];
      $file_ext=strtolower(end(explode('.',$_FILES['image']['name'])));

      $extensions= array("jpeg","jpg","png");

      if(in_array($file_ext,$extensions)=== false){
         $errors[]="extension not allowed, please choose a JPEG or PNG file.";
      }

      if($file_size > 2097152) {
         $errors[]='File size must be 2 MB';
      }

      if(empty($errors)==true) {
         move_uploaded_file($file_tmp,"uploads/".$file_name);

        $store=mysqli_query($conn,"UPDATE tbl SET avatar='$file_name' WHERE username='$user'");
        mysqli_query($conn,$store);
         echo "Success";
      }else{
         print_r($errors);
         echo"it failed";
      }
   }
?>

      <form action="" method="POST" enctype="multipart/form-data">
<p id="p1">Change profile picture:</p> <br />
         <input type="file" name="image" />
         <input type="submit"/>
      </form>

<?php

$getimg = mysqli_query($conn,"SELECT avatar FROM tbl WHERE username='$user'");
$rows=mysqli_fetch_array($getimg);
$img = $rows['avatar'];

?>



<img id="myImg" src="uploads/<?php echo $img?>"  alt="<?php echo $img ?>" width="200" height="150">

Please ask any questions i will be happy to help you through this.

To achieve that:

1) define your directory of user profile picture in config file using define() ex : define('PROFILE_PATH', 'your dir path');
2) when user is logged in get image name with sql query with logged in userid / username to get the profile picture name from db
3) pass the PROFILE_PATH and concat your image name after that in tag

Tested!

<?php



    $username = isset($_SESSION['username']) ? $_SESSION['username'] : "";

    $conn = mysqli_connect("localhost", "root", "", "test");

    if(!empty($username))
    {
        if(isset($_FILES['image']))
        {
          $errors= array();
          $file_name = $_FILES['image']['name'];
          $file_size = $_FILES['image']['size'];
          $file_tmp = $_FILES['image']['tmp_name'];
          $file_type = $_FILES['image']['type'];
          $file_ext=strtolower(end(explode('.',$_FILES['image']['name'])));

          $extensions= array("jpeg","jpg","png");

          if(in_array($file_ext,$extensions)=== false){
             $errors[]="extension not allowed, please choose a JPEG or PNG file.";
          }

          if($file_size > 2097152) {
             $errors[]='File size must be 2 MB';
          }

          if(empty($errors)==true)
          {
             move_uploaded_file($file_tmp,"uploads/".$file_name);

            $store = "UPDATE users SET userPic='$file_name' WHERE username='$username'";

            if(mysqli_query($conn, $store))
            {
                echo "Success";
            }
            else
            {
                echo "Update failed!";
            }

          }else{
             print_r($errors);
             echo"it failed";
          }
        }
    ?>

    <?php
    $getimg = mysqli_query($conn,"SELECT userPic FROM users WHERE 
    username='$username'");
    $rows=mysqli_fetch_array($getimg);
    $img = $rows['userPic'];

    ?>



     <img id="myImg" src="images/uploads/<?php echo $img?>"  alt="<?php echo $img ?>" width="200" height="150">


     <?php  
    }
    else
    {
        echo "Invalid Username";
    }

You can leave me a comment if you need a guide

joesphi