Changing background-image to sql image

Question

Is there a way to set the background-image: url(--SET THIS--) , to an sql picture? I was thinking about somthing like this:

$img = $MysqliHandler->query(SELECT  avatar FROM account WHERE username="'.$_SESSION['name'].'"';

And then somehow change the url to: '.base64_encode( $img[0]['avatar'] ).'

Right now I just have a simple change avatar function, but I want to save this to a specific "'.$_SESSION['name'].'" , so that user always have that avatar, and are able to change it. Should I use ajax , and then link the new image to another php, and run a 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>

Answer 1

So I use data:image/jpeg;base64,'.$_SESSION['avatar'].' , as background, in a separate.php file, and this is ofc. included in my.php file:

#imgDivEdit{
    width: 125px;
    height: 125px;
    background-image: url("data:image/jpeg;base64,'.$_SESSION['avatar'].'");
    border-radius: 50%;
    background-size: cover;
}

Then I made a if statement, that updates the sql and then retrieve it and update session.

$URL = $_SERVER['REQUEST_URI'];
if(isset($_POST['Save']) && !empty($_POST['Save']))
{
    if($_FILES["imageUpload"]["size"]>1010000 || $_FILES["imageUpload"]["size"]==0 )
    {
            echo"<h3 style='color:#db4409'>Failed to upload image.</h3>";
    }
    else{            
            $image=addslashes(file_get_contents($_FILES['imageUpload']['tmp_name']));
            $sql='UPDATE accounts SET avatar = ("'.$image.'") WHERE username ='.$_SESSION['name'].'';
            $query = $MysqliHandler->query($sql);
            $sql='SELECT avatar FROM accounts WHERE username ='.$_SESSION['name'].'';
            $avatar = $MysqliHandler->query($sql);
            $_SESSION['avatar'] = base64_encode( $avatar[0]['avatar'] );
            header("Refresh:0; url=$URL");
            exit();                             
    }
}

I made a save option to run all this when a image is uploaded, and showed:

<form method="POST" enctype="multipart/form-data">                           
    <input id="imageUpload" type="file" name="imageUpload" placeholder="Photo" accept="image/x-png,image/gif,image/jpeg" required="" capture>
    <div id="Change" hidden>
        <input  type="submit" name="Save" id="Save" value="Save" class="btn btn-info Save"/> <p style="font-size:11px;">Max size: 1Mb</p>
    </div>
</form>

.js

$("#imageUpload").change(function() {
    $("#Change").show();
});