javascript - 将背景图像更改为 sql 图像

Question

有没有办法将 background-image: url(--SET THIS--) 设置为 sql 图片？ 我在想这样的事情:

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

然后以某种方式将 url 更改为:'.base64_encode( $img[0]['avatar'] ).'

现在我只有一个简单的更改头像功能，但我想将其保存到特定的 "'.$_SESSION['name'].'"，以便用户始终拥有头像，并且能够更改它。 我应该使用 ajax，然后将新图像链接到另一个 php，并在那里运行更新图像 sql 函数吗？

$("#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

所以我在单独的 .php 文件中使用 data:image/jpeg;base64,'.$_SESSION['avatar'].' 作为背景，这是 ofc。包含在我的 .php 文件中:

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

然后我做了一个 if 语句，它更新了 sql，然后检索它并更新 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();                             
    }
}

我做了一个保存选项，在上传图像时运行所有这些，并显示:

<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();
});