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

Question

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

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

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

Answer 1

如果使用本地存储是一个选项，我认为它会解决你的问题。我在jquery不是很舒服，但我认为你试图改变src属性，如果提供了一个新的图像。您可以首先将图像的路径存储在本地存储中。

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

然后，当上传新图像时，只需更改本地存储的路径。您可以像这样在您的配置文件中显示此图像:

localstorage.getItem('imgPath');