title: Changing profile picture php
body: <p>I am creating a social network and I am having a couple of problems .</p>
  
  <ol>
  <li><p>When I click the change profile picture the image goes to the destination and then nothing happens . </p></li>
  <li><p>I think there is a max size for the picture that is uploaded . How do I give a statement that tells the user the image is to big ? </p></li>
  </ol>
  
  <p>profile.php:</p>
  
  <pre><code>&lt;form id="form2" action="upload.php" method="post" enctype="multipart/form-data"&gt;
  &lt;p id="p1"&gt;Change profile picture:&lt;/p&gt; &lt;br /&gt;
  &lt;input type="file" name="fileToUpload" id="fileToUpload"&gt;&lt;br /&gt;
  &lt;br&gt;&lt;input id="sub1" type="submit" value="Change profile picture" name="change"&gt;&lt;br /&gt;
  &lt;/form&gt;
  
  &lt;!-- Trigger the Modal --&gt;
  &lt;img id="myImg" src="default.png" width="200" height="150"&gt;
  
  &lt;!-- The Modal --&gt;
  &lt;div id="myModal" class="modal"&gt;
  
  &lt;!-- The Close Button --&gt;
  &lt;span class="close" onclick="document.getElementById('myModal').style.display='none'"&gt;&amp;times;&lt;/span&gt;
  
   &lt;!-- Modal Content (The Image) --&gt;
  &lt;img class="modal-content" id="img01"&gt;
  
  &lt;!-- Modal Caption (Image Text) --&gt;
   &lt;div id="caption"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
  // Get the modal
  var modal = document.getElementById('myModal');
  
  // Get the image and insert it inside the modal - use its "alt" text as a caption
  var img = document.getElementById('myImg');
  var modalImg = document.getElementById("img01");
  var captionText = document.getElementById("caption");
  img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
  }
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  span.onclick = function() { 
  modal.style.display = "none";
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>upload.php:</p>
  
  <pre><code>$target_dir = "images/uploads/";
  $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
  $uploadOk = 1;
  $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
  
  // Check if image file is a actual image or fake image
  
  if(isset($_POST["change"])) {
  
  move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);
  $sql = "UPDATE users SET userPic = '".$_FILES['fileToUpload']['name']."' WHERE username = '" . $username . "'";
  
  $check = $conn-&gt;query($sql);
  
  if($check !== false) {
  echo "&lt;a href = profile.php&gt; Profile pciture has been changed &lt;/a&gt;" . $check["mime"] . ".";
  $uploadOk = 1;
  
  } else {
  echo "File is not an image.";
  $uploadOk = 0;
  }
  } else {
  
  echo"did not change";
  }
  </code></pre>