更改用户头像 Javascript , PHP, HTML

Question

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

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

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>

更新！！

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

上传.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 问题，但听起来这更像是您提出的架构问题，而不是像为什么这不起作用这样的实际问题。

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

Answer 2

我在自己的博客上有这样的 smt（它是 php 代码！我在页面上打印时遇到了一些问题）：

   if(isset($_FILES['profile']) === true){
	if(empty($_FILES['profile']['name']) === true){
	echo "<div class='img-file-error'>Please choose a file!</div>";
	}else{
	$allowed = array('jpg', 'jpeg', 'gif', 'png');
	$file_name = $_FILES['profile']['name'];
	$file_extn = strtolower(end(explode('.', $file_name)));
	$file_temp = $_FILES['profile']['tmp_name'];
	if(in_array($file_extn, $allowed) === true){
	change_profile_image($session_user_id, $file_temp, $file_extn);
header('Location: settings');
	exit();
	}else{
	echo "<div class='img-file-error'>Incorrect file type!<br>
	Allowed types: ";
	echo implode(', ',$allowed);
	echo ".</div>";
	}
	}
	}
	if(!empty($user_data['profile'])){
	echo '<img id="previewImg" class="img-settings" width="250px" src="', $user_data['profile'], '" alt="',$user_data['first_name'],'\'s profile image">';
	}

还有js文件：

function onFileSelect(e){
		var f = e.target.files[0];
		if(f.type.match(/image.*/)){
			var reader = new FileReader;
			place = document.getElementById("previewImg");
			reader.readAsDataURL(f);
			reader.onload = function(e){ 
				place.src = e.target.result;
			}
		}
		else {
				alert('You can chose only pictures');
			};
	};
	if(window.File && window.FileReader && window.FileList && window.Blob){
		document.querySelector("input[type=file]").addEventListener("change", onFileSelect, false);
	}else{
		console.warn( "Your browser does not support FileAPI");
	};

Answer 3

解决此问题的最佳方法可能是对文件进行哈希处理并将哈希存储在数据库中，然后以哈希作为名称保存文件。

这样你就可以创建每个喜欢的用户

insert into user (username, photo) values ('me', 'default_photo_hash')

然后当用户更新他的照片时，你对新照片进行哈希处理，保存它，然后

update user (photo) values ('new_photo_hash') where username='me'