如何更改標題的背景圖像？

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或Cookies臨時保留圖像URL。 如果您希望更改是永久的，則將數據存儲在MySQL之類的數據庫中。

用於設置本地存儲項目的JavaScript代碼示例：

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

用於檢索本地存儲項目的JavaScript代碼示例：

localStorage.getItem('backgroundUrl');

編輯

如果您想在數據庫中存儲新圖像的URL，那么您將需要一個專用於標題背景圖像的mysql表。

要更新表，請檢查以下URL： PHP mySQLi更新表

要從表中檢索圖像URL，請檢查以下URL： https : //dev.mysql.com/doc/refman/5.5/en/select.html

如何更改標題的背景圖像？

問題描述

1 個解決方案

解決方案1
0 2017-03-16 14:45:43

編輯

如何更改標題的背景圖像？

問題描述

1 個解決方案

解決方案1 0 2017-03-16 14:45:43

編輯

解決方案1
0 2017-03-16 14:45:43