0

I am creating a social network project with PHP , HTML and CSS . One of the features the users have are to upload a profile picture . I just looked at a couple of tutorials and I've been following them but they a very confusing and I am completely lost . This is my last hope . I have some code in my upload.php file and when I go to that page It says File saved which means the image was saved but I don't see the image anywhere . Can someone help me save the image to my folder and when the user clicks change profile picture the picture get changed and saved ? Please help . Thank you .

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="submit"><br />
</form>

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

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- The Close Button -->
<span class="close" 
onclick="document.getElementById('myModal').style.display='none'">&times;</span>

<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">

<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<script>
// 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 <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
modal.style.display = "none";
}
</script>

upload.php :

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

include("connect.php"); 
include("auth_login.php"); 

$target_dir = "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["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
    echo "File saved - " . $check["mime"] . ".";
    $uploadOk = 1;
} else {
    echo "File is not an image.";
    $uploadOk = 0;
}
}
  • 1
    Here's the __basic tutorial__ you should follow http://php.net/file-upload – u_mulder Aug 08 '17 at 20:25
  • I would suggest you check my answer to this question: https://stackoverflow.com/questions/38509334/full-secure-image-upload-script/38712921#38712921 It will teach you a lot about image uploads and security. You can also download a very easy-to-use library at the bottom of the answer. – icecub Aug 08 '17 at 20:27
  • umm, By default if your upload code works, it will save the file in temp folder you need to pick that file from and place it in any public folder. Follow any step by step tutorial. I suggest Alex videos on php, #newboston – Satyam Pathak Aug 08 '17 at 20:28

1 Answers1

0

Your target file never gets moved to the actual dir! It stays in the temporary dir:

in the if add a file move:

move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);
Mouser
  • 13,132
  • 3
  • 28
  • 54