javascript - 将 style.backgroundImage 更改为 php $_SESSION

Question

在我的 .php 中，我有 session_start();，以及特定用户的默认头像 $_SESSION['avatar']。这些头像以background-image:显示。我编写了一个 JavaScript，将 background-image 更改为上传的 input，但在用户选择Save 此图像作为其新个人资料之前化身，他们可以选择取消他们正在做的事情。如果他们取消，我想将背景改回他们的头像，我以为这会起作用，但事实并非如此:

.php

session_start();
$CurrentAvatar = $_SESSION['avatar'];

.html

<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>
<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"/> <input type="button" onclick="Cancel()" value="Cancel" class="btn btn-info Cancel"/> <p style="font-size:11px;">Max size: 1Mb</p>
    </div>
</form>

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

.js

$("#imageUpload").change(function() {
   $("#Change").show();
});
function Cancel() {
   var CurrentAvatar = "<?php echo $CurrentAvatar;?>";
   $("#Change").hide();
   document.getElementById("imgDivEdit").style.backgroundImage = 
   "url(data:image/jpeg;base64,CurrentAvatar)";
 }
$("#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);
});

Answer 1

您的功能太多，过于复杂。把事情简单化。单击下面的运行代码片段。

我重写了最初的答案，因此下面的代码使用纯 JS 而没有 jQuery。

document.getElementById('imageUpload').addEventListener('change', function(e) {
        
    let preview_div = document.getElementById("imgDivEdit"),
        change_div  = document.getElementById("Change");
    
        
		// If there are files, preview them, else go back to initial background
		// which is defined inside <style> tags
    if (this.files && this.files[0]) {
		     
       change_div.style.display = 'block';
         
       let reader = new FileReader();
       reader.readAsDataURL(this.files[0]);
       reader.onloadend = function(){
          preview_div.style.backgroundImage = "url(" + reader.result + ")";  
       }
    } else {
       Cancel();
    }
});

function Cancel(){

   let preview_div = document.getElementById("imgDivEdit"),
       change_div  = document.getElementById("Change");
        
   change_div.style.display = 'none';
   preview_div.style.backgroundImage = '';
}

<div id="avatar">
    <div class="container">
        <div id="imgDivEdit"></div>
        <div id="ChangeImg" class="overlay">
            <div class="text">Change Image</div>
        </div>
    </div>
</div>

<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"/> <input type="button" onclick="Cancel()" value="Cancel" class="btn btn-info Cancel"/> <p style="font-size:11px;">Max size: 1Mb</p>
    </div>
</form>

<style>
#imgDivEdit{
    width: 125px;
    height: 125px;
    background-image: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABLCAIAAABRBSb5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAE8SURBVHhe7ddBEsIwDENR7n/pknF+GBjYOHEKFXq7qmBby96Ov+GqilxVkasqclVFrqrIVRW5qiJXVeSqilxVkasqctUvuQUeqhXMrbqvz+mISq0O5bRANIspgajUb91XNeejX7+v0AVOrOKqilxVkasqclVFrqrIVRVdqWr/hGp4TrpMVVoGoqT5qqw960uVZYEoqaBqQ7QTmwJRUk3Vjhd7sCMQJS3dx+aBdA92BKKk1ftYPpBuwIJAlFRwHPsH0mpMD0RJNZdxwkBaitGBKKnsLK54xbsKTAxESbuueeDdMsYFoqTKqg23vOH1LKYMpEnFVTsu+oRfZPDPgTRvS9WGuzZgQd6uqg2n1WHurI1VH7h0GeNmnVH1GVcn8ec1Z1f9IldV5KqKXFWRqypyVUWuqshVFf1N1eO4A7VmgBItY0/QAAAAAElFTkSuQmCC);
    border-radius: 50%;
    background-size: cover;
}
</style>