Ich versuche, das Hintergrundbild meines Headers zu ändern, der JavaScript-Code, mit dem ich arbeite funktioniert absolut gut, aber wenn ich die Seite neu lade, wird das Bild auf den Standard zurückgesetzt. Ich möchte, dass die background-image-Eigenschaft den neuen Wert erhält, den ich der Eingabe zuweise.Wie kann ich das Hintergrundbild des Headers ändern?

Hier ist der Code

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

Quelle

2017-03-16 Vijit Ail

Sie die readUrl auf Dateiänderungen rufen so, wenn Sie die Seite, die Sie neu zu laden müssen Sie die Datei ändern, um den Hintergrund zu ändern – Araz

Welches Ergebnis erwarten Sie zu erhalten? –

Ich möchte das Hintergrundbild bleiben, auch nachdem ich die Seite neu geladen habe @ TarasKumpanenko –

Verwenden local oder Cookies vorübergehend das Bild behalten url. Wenn die Änderungen dauerhaft sein sollen, speichern Sie die Daten in einer Datenbank wie MySQL.

Beispiel JavaScript-Code einen lokalen Speicher Artikel einzustellen:

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

Beispiel JavaScript-Code lokalen Speicher Element abzurufen:

localStorage.getItem('backgroundUrl');

EDIT

Wenn Sie speichern möchten die neue Image-URL in Ihrer Datenbank, dann benötigen Sie eine Tabelle in mysql, die dem Header-Hintergrundbild gewidmet ist.

die Tabelle Prüfung diese URL zu aktualisieren: PHP mySQLi update table

die Bild-URL aus der Tabelle abzurufen, überprüfen Sie diese URL: https://dev.mysql.com/doc/refman/5.5/en/select.html

Quelle

2017-03-16 14:45:43 Coder

Kannst du mir die Lösung mit PHP und MySQL geben? –

@VijitAil gerade aktualisiert, die Antwort, google für mehr verständliche Beispiele. – Coder

danke @ PHPlover –

Wie kann ich das Hintergrundbild des Headers ändern?

Antwort

EDIT

Verwandte Themen