更改头像，然后保存新头像答案

【问题标题】：Changing Profile Picture, and then Saving new one更改头像，然后保存新头像
【发布时间】：2022-11-22 23:36:37
【问题描述】：

我正在编写一个具有个人资料页面的程序，我希望能够切换个人资料图片。我可以更改它，但我不确定如何从文件中保存新图片。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="profile-container">
   <image id="profileImage" src="https://t3.ftcdn.net/jpg/03/46/83/96/360_F_346839683_6nAPzbhpSkIpb8pmAwufkC7c5eD7wYws.jpg" />
</div>
<input id="imageUpload" type="file" name="profile_photo" placeholder="Photo" required="" capture>
      <script>
      $("#profileImage").click(function(e) {
          $("#imageUpload").click();
      });
      function fasterPreview( uploader ) {
          if ( uploader.files && uploader.files[0] ){
                $('#profileImage').attr('src', 
                   window.URL.createObjectURL(uploader.files[0]) );
          }
      }
      $("#imageUpload").change(function(){
          fasterPreview( this );
      });
      </script>

这是我更改图片的代码，但我不知道如何保存新图片。每次我刷新页面时，图片都会恢复到默认状态。

【问题讨论】：

欢迎来到堆栈溢出！您需要某种数据库来存储信息。这是对 Stack Overflow 的一个相当大的要求。查看有关通过 JS（或 PHP）将数据保存到数据库的教程。
你实际上并没有把它保存在任何地方。您只是在 DOM 中更改它。当你刷新时它永远不会在那里。您需要将其上传并保存到服务器

标签： javascript html

【解决方案1】：

如果可以选择使用本地存储，我认为它可以解决您的问题。我对 jquery 不太熟悉，但我认为如果提供了新图像，您正试图更改 src 属性。您最初可以将图像的路径存储在本地存储中。

localstorage.setItem('imgPath', 'https://path-to-image-here');

然后，当上传新图片时，只需更改本地存储中的路径即可。您可以像这样在个人资料中显示此图片：

localstorage.getItem('imgPath');

【讨论】：