修改

Question

我正在尝试更改标题的背景图片，我正在使用的javascript代码完全正常但是当我重新加载页面时，图像会重置为默认值。我希望background-image属性获取我从输入中分配的新值。

这是代码

HTML -

<html>

<head>



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">



    <title>CorpoViz Admin</title>

   <script src="JS/editor.js"></script>



</head>

<body onload=iFrameOn()>
    <div class="jumbotron" id=headerBg>

        <div class="container-fluid">

            <h1>Heading</h1>


            <span style="float:right;">
            <input type='file' id='getval' class="inputfile btn btn-default" />
            <label for="getval" class="btn btn-default" style="font-size:20px;">Choose an image</label>
            </span>

JavaScript -

                document.getElementById('getval').addEventListener('change', readURL, true);
                function readURL(){
                    var file = document.getElementById("getval").files[0];
                    var reader = new FileReader();
                    reader.onloadend = function(){
                        document.getElementById('headerBg').style.backgroundImage = "url(" + reader.result + ")";        
                    }
                    if(file){
                        reader.readAsDataURL(file);
                        document.getElementById('headerBg').style.backgroundImage = <?php echo "\"url(\" + reader.result + \")\"; " ?>
                    }
                    document.getElementById('headerBg').style.backgroundImage = "url(" + reader.result + ")";
                }

CSS -

     #headerBg{
     background-image:url('');
     background-size:cover;
     background-position: center;
     }

Answer 1

使用localStorage或Cookie暂时保留图片网址。如果您希望更改是永久性的，则将数据存储在MySQL等数据库中。

设置本地存储项的javascript代码示例：

localStorage.setItem('backgroundUrl', 'http://example.com/test123.png');

检索本地存储项的JavaScript代码示例：

localStorage.getItem('backgroundUrl');

修改

如果您想将新图像URL存储在数据库中，那么您将需要一个专用于标题背景图像的mysql表。

要更新表，请检查此网址： PHP mySQLi update table

要从表格中检索图片网址，请检查以下网址：https://dev.mysql.com/doc/refman/5.5/en/select.html

如何更改标题的背景图像？

1 个答案:

修改