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>

更新!!

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

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 = "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

解决此问题的最佳方法可能是散列文件并将散列存储在数据库中，然后使用散列作为名称保存文件。

这样您就可以创建像

这样的每个用户

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

然后当用户更新他的照片时，您可以散列新照片，保存并

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

Answer 2

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

＆＃13;

   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">';
	}

＆＃13;

和js文件：

＆＃13;

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");
	};

＆＃13;

更改用户个人头像Javascript，PHP，HTML

2 个答案: