Can the
background-image: url(--SET THIS--)$img = $MysqliHandler->query(SELECT avatar FROM account WHERE username="'.$_SESSION['name'].'"';
And then somehow change the URL to:
'.base64_encode( $img[0]['avatar'] ).'Currently, I only have a simple change avatar function, but I want to save this to a specific "'.$_SESSION['name'].'", so that the user always has that avatar and can change it. Should I use ajax, link the new image to another PHP file, and run an update image SQL function there?
$("#ChangeImg").click(function(e) {
$("#imageUpload").click();
});
function fasterPreview(uploader) {
if (uploader.files && uploader.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(uploader.files[0]);
reader.onloadend = function(){
document.getElementById("imgDivEdit").style.backgroundImage = "url(" + reader.result + ")";
}
}
}
$("#imageUpload").change(function() {
fasterPreview(this);
});#imageUpload {
display: none;
}
.container {
position: relative;
width: 125px;
height: 125px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 125px;
width: 125px;
opacity: 0;
transition: .5s ease;
background-color: rgba(11, 90, 180, 0.795);
border-radius: 50%;
}
.container:hover .overlay {
opacity: 0.7;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
cursor: pointer;
}
#imgDivEdit {
width: 125px;
height: 125px;
background-image: url("https://www.whatsappprofiledpimages.com/wp-content/uploads/2019/01/Nice-Whatsapp-DP-Profile-Images-4-300x300.jpg");
background-position: 5px -5px;
border-radius: 50%;
background-size: cover;
}<div id="avatar"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="imgDivEdit"></div>
<div id="ChangeImg" class="overlay">
<div class="text">Change Image</div>
</div>
</div>
</div>
<input id="imageUpload" type="file" name="profile_photo" placeholder="Photo" required="" capture>