javascript - 更改用户个人资料图片 Javascript、PHP、HTML

Question

我正在创建一个社交网络，让用户可以选择更改他们的个人资料图片或保持不变(默认)。我问了一个关于这个的问题并得到了帮助我将图片保存到我的上传文件夹中的答案，但没有帮助我如何更改用户的个人资料照片。

用户将单击“选择文件”按钮，然后在选择文件时，他们将单击“更改个人资料图片”按钮。当他们完成所有这些操作后，我希望将默认图片更改为用户选择的图片。有人可以帮帮我吗 ？

配置文件.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>

更新!!

我已经更新了我的代码以保存图像，然后将其保存在数据库中，但所有这些代码所做的只是将其保存在我的图像文件夹中，而不是将其保存在我的数据库中。请帮助我。

上传.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 = "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);

$q = mysqli_query ($conn, "UPDATE users SET userPic = '".$_FILES['fileToUpload']
['name']."' WHERE username = '" . $username . "'");

if($check !== false) {
echo "File saved - " . $check["mime"] . ".";
$uploadOk = 1;

} else {
echo "File is not an image.";
$uploadOk = 0;
}
}

Answer 1

我不确定我能否回答您的特定 PHP 问题，但听起来这更像是您提出的架构问题，而不是诸如为什么不起作用之类的实际问题。

我建议你有一个授权表来跟踪你所有的用户数据，如用户名、电子邮件、profile_photo 等...你的 profile_photo 应该是一个字符串文件路径，指向他们正在使用的图像。通过简单地删除旧图像并指向新图像，您可以解决这个问题，并且可以使您的文件系统保持 slim 。另一种选择是让 profile_photo 能够为他们上传的每张图片存储多个文件路径位置。