javascript - 更改个人资料图片php

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

$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->query($sql);

if($check !== false) {
echo "<a href = profile.php> Profile pciture has been changed </a>" . $check["mime"] . ".";
$uploadOk = 1;

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

echo"did not change";
}

Answer 1

在您的HTML中，特别是以下行：

<img id="myImg" src="default.png" width="200" height="150">

您只需将图像始终设置为 default.png。除非发布的代码错误，否则我会丢失一些东西。为什么这是您看到的唯一图像也就不足为奇了。

您需要从数据库中选择图像src值，并将其添加到该标签中。

因此，您需要：

SELECT userPic FROM users WHERE username = :username

其中 :user是当前登录的用户ID。如果没有更多关于什么框架或正在使用的数据库库的信息，我将为您提供更多帮助。例如，我不知道如何在用户登录后将用户保存在会话数据中，因此我无法知道如何获取用户的ID。我也不知道您是否使用PDO，MySqli甚至使用什么数据库。

无论如何，我都会添加一些我认为可以改进的东西。


在数据库中的userPic字段的用户表中。将默认值设置为 default.png，以便在添加新用户记录时，该字段将包含默认图像。
非常重要在将输入连接到SQL的任何地方，请更改为使用准备好的语句。否则，您要求被黑客入侵。请参阅Sql注入攻击。
确保删除或覆盖旧图像。
确保用户B上传的具有相同名称的图像不会被用户A上传的图像覆盖。
我不会使用用户提供的图像名称。用户可以在其中放入各种垃圾。至少，用 -替换所有特殊字符和空格，然后减小 -。


像这样：

  //note - remove the extension before doing this.
 $str = 'dirty image name/.*';
 $cleanname = trim(preg_replace(['/[^-\w]/', '/-{2,}/'], '-', $dirtyname),'-');

输出：

 dirty-image-name

看到 live

我什至让用户在文件名中添加引号，但不确定他们是如何做到的，但是在Linux上删除此文件时很难。空格可能会对网址造成破坏。查看url，通常不会看到任何空格或其他特殊字符。您还应该在图像上添加 time()，否则另一个用户可能会覆盖另一个用户的图像。因此，例如 $imagename = time().'-'.$imagename;或改用用户ID，可能更好。

正如我在评论中提到的那样，使用正确的命名约定，您甚至可以不必在数据库中保存映像名就可以摆脱困境。如果要这样保存图像。

 {$user_id}_profile.png

然后您可以检查：

 $profileImage = "{$path}/{$user_id}_profile.png";

 if(!file_exists($profileImage)){
      $profileImage = "{$path}/default.png";
 }

 echo "<img src=\"{$profileImage}\" >";

该系统的唯一困难是将图像更改为PNG，但是它具有照顾文件名，覆盖问题并避免将其存储在数据库中的优点。

修改图像并将其缩放或裁剪为所需的大小不是一个坏主意。这是我很久以前写的图像类。还没有100％完成，也没有真正记录在案。但据我所知，它确实可以工作。大约5年了，我什么都没做过。但至少它应该给您一些有关如何裁剪，调整大小，转换图像等的想法。

https://github.com/ArtisticPhoenix/MISC/tree/master/Image

深入探讨该主题有点超出这个问题的范围，但是即使是出于启发，也欢迎您使用它。

编码愉快！

更新

您可以通过多种方式对文件进行哈希处理，


你可以做 hash_file('sha256', $filepath)
您可以哈希名称 hash('sha256', $filename)


如果 SHA-256很长，则可以改用sha1。甚至 MD5都可能起作用，它们的长度为64,40和32。我发现 SHA-1的速度比 MD5略快（当进行10k哈希处理时），我的意思是要快百分之几秒。

哈希名称比哈希文件内容要快得多。文件哈希可以具有一些有用的应用程序，但是可能不在此问题的范围内。基本上，您可以通过比较内容的哈希值来判断它是否是同一文件。

无论如何，我都会添加一些特定于上传用户的标识符，例如用户名：

 $filename = $username.'-'.hash('md5', $filename).$ext;

输出类似：

someuser-5d41402abc4b2a76b9719d911017c592.png

或者，您可以将所有用户的“资料”存储在以他们命名的文件夹中：

images/someuser

我什至使用Zip存档来存储用户文件，这非常好用，但是却增加了应用程序的复杂性，因为当您要保存和显示文件时必须对文件进行Zip /解压缩。但是，它可以使文件系统上的所有内容变得更加整洁。在性能方面，我没有注意到任何大问题，但是我在Azure上具有非常强大的服务器（RAM为54GB）

我提到这些原因有几个：


用户A永远不能覆盖用户B的内容
删除用户时，如果文件具有与用户帐户相关的信息，则删除文件要容易得多。例如删除以其帐户命名的整个文件夹或Zip存档。


还有许多其他Algo可以用于散列，您可以使用 hash_algos()获得列表。散列越长，对于不同的明文字符串发生冲突或重复散列的机会就越少。您可以编写一个简单的循环来获取它们的长度：

   foreach(hash_algos() AS $algo){
       $hash = hash($algo, "hello");
       echo "Algo:{$algo} Hash:{$hash} Len:".strlen($hash)."\n";
   }

您可以实时查看此 here

它输出如下内容：

 Algo:md2 Hash:a9046c73e00331af68917d3804f70655 Len:32
 Algo:md4 Hash:866437cb7a794bce2b727acc0362ee27 Len:32
 Algo:md5 Hash:5d41402abc4b2a76b9719d911017c592 Len:32
 Algo:sha1 Hash:aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d Len:40
 Algo:sha224 Hash:ea09ae9cc6768c50fcee903ed054556e5bfc8347907f12598aa24193 Len:56
 Algo:sha256 Hash:2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824 Len:64
 ...
 Algo:fnv1a64 Hash:a430d84680aabd0b Len:16

我什至使用 fnv1a64进行文件名哈希（长度为16）。

您可能还希望存储文件的原始名称。通常我要做的是为 user_files设置一个表，然后在其中添加一些类似的字段

 id - Primary Auto Increment key
 user_id - Foreign key for the user table
 hashname - hashed name of the file ( - the extension )
 filename - original filename
 extension - file extension
 status - status ( deleted | public | private )
 type - type of image ( profile_image, thumb_60, thumb_128 )
 create_date - date the record was created

因此，我使用 hashname将其保存在硬盘驱动器上，但是当用户查看文件名时，我给他们 filename这样的名字就是他们可以识别的名称，而无需考虑相关的URL编码问题原始文件名。指向这样的文件的“伪”链接为：

  <a href="{$imagepath}{$hashname}" >{$filename}</a>

切勿存储“路径名”的完整路径和文件名。仅存储文件名，并使用代码指向路径。路径会随着时间而变化，如果您存储它们，则可能必须在发生这种情况时更新所有数据库记录（或使用Symlinks来使站点正常工作）。如果仅存储文件名，则只需更改代码即可。

同样重要的是，不要将用户信息放入“路径”中，而是使用用户信息来查找文件，然后基于此信息构建路径。您必须注意目录横向攻击。

https://en.wikipedia.org/wiki/Directory_traversal_attack

这就是为什么对文件名进行散列是一个好主意的原因。

您还可以将将哈希保存到的字段的排序规则更改为 UTF8_bin，它是UTF8二进制。这是使对该字段的搜索区分大小写。哈希值区分大小写。这是一件经常被忽视的小事情。因此，我不会说这是必要的，但这是一个很好的做法，可以告诉您您在做什么。同样，散列的长度越短，散列的重要性就越大。

有关此文档：

https://dev.mysql.com/doc/refman/5.7/en/case-sensitivity.html


  如果希望始终以区分大小写的方式对待列，请使用区分大小写或二进制排序规则进行声明


我知道有很多要考虑的因素，但确实值得做对。

更新2

正如您在评论中所问的那样，您可以使用 uniqid，但我仍然强烈建议为每个用户添加一条信息，这可以通过向其添加前缀来完成。

  $username = 'someuser';
  uniqid($username.'-');

输出：

 someuser-5a5a847a96c76

这样做的主要原因（正如我之前提到的）是您需要100％确保一个用户不能覆盖另一位用户的数据。 uniqid不能“保证”在100％的时间内使唯一值。

http://php.net/manual/en/function.uniqid.php


  警告此函数试图创建唯一标识符，但不能保证返回值的100％唯一。


从一个账户到另一个账户的交叉污染，应格外小心。否则，将破坏用户对系统安全性的任何“信任”。这似乎是很小的风险，但是如果发生的话，那将是非常糟糕的。我知道我不会使用我的信息可能从我的帐户泄漏到另一个帐户的网站。