[英]Changing background-image to sql image
Is there a way to set the background-image: url(--SET THIS--)
, to an sql picture?有没有办法将background-image: url(--SET THIS--)
为 sql 图片? 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'] ).'
然后以某种方式将 url 更改为: '.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.现在我只有一个简单的更改头像 function,但我想将其保存到特定的"'.$_SESSION['name'].'"
,以便用户始终拥有该头像,并且能够更改它。 Should I use ajax
, and then link the new image to another php, and run a update image sql function there?我应该使用ajax
,然后将新图像链接到另一个 php ,并在那里运行更新图像 sql ZC1C4145268E68394D 吗?
$("#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>
So I use data:image/jpeg;base64,'.$_SESSION['avatar'].'
所以我使用data:image/jpeg;base64,'.$_SESSION['avatar'].'
, as background, in a separate.php file, and this is ofc. ,作为背景,在一个单独的.php 文件中,这是 ofc。 included in my.php file:包含在 my.php 文件中:
#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.然后我做了一个 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();
}
}
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 .js
$("#imageUpload").change(function() {
$("#Change").show();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.