JQuery ersetzt dynamisch das Hintergrundbild

Question

Ich versuche, meinen Benutzern zu erlauben, das Hintergrundbild eines bestimmten DIV dynamisch zu ändern. Sie tun dies, indem sie ein Bild über ein HTML-Formular hochladen. Sobald das Bild hochgeladen ist, benutze ich JQuery, um den Hintergrund des DIV zu aktualisieren.

Ich weiß, das wurde schon mehrmals gefragt und mit einem Beispiel, das ich online gefunden habe, kann ich das Hintergrundbild ersetzen, aber wenn der Benutzer ein neues Bild hochladen und erneut ändern will, dann funktioniert es nicht.

Es scheint, ich kann das Bild nur einmal ändern, nachfolgende Änderungen geschehen nicht, es sei denn, ich aktualisiere die Seite.

Mein DIV wird mit dem folgenden CSS

#background 
{ 
    width:450px; 
    height:200px; 
    background-color: #FFFFFF; 
    background-image: url("images/background.png"); 
    background-repeat: no-repeat; 
    #background-size: contain; 
    background-size: cover; 
} 

Onload die DIV ein Standard-Hintergrundbild hat, lädt der Benutzer das Bild über das Formular und mit der folgenden JQuery ich das Bild auf die neue hochgeladene Datei ändern.

$('#background').css("background-image", "url(" + filename + ")"); 

filename ist der Name der hochgeladenen Datei. Das alles funktioniert gut und das neue Bild wird angezeigt.

Wenn ich eine andere Datei hochlade, kann ich sehen, dass die Datei im Upload-Ordner korrekt geändert wurde, aber der DIV-Hintergrund ändert sich nicht.

Eine Sache, die ich bemerkt habe, nach der ersten Änderung zeigt Chrome das CSS für das DIV mit den folgenden unmarkierten. background-image: url(images/bacground.png);, es scheint auch, dass dem DIV jetzt ein Style zugewiesen ist, der den Namen der neuen Datei als Hintergrund hat.

Wie mache ich das, damit sie den Hintergrund so oft ändern können, wie sie möchten?

Dank

Answer 1

Das ist nicht merkwürdig, dass Chrome Ihr background-image Stil unticked gesetzt, weil jquery Hintergrund-Bild als Inline-Stil des Elements festgelegt, die immer eine höhere Priorität als Arten von Ihrer CSS-Datei hat.

Wahrscheinlich ändern Sie alte Datei mit einer neuen Datei, während sie den gleichen Namen haben und Chrome Hintergrund nicht aktualisieren, weil er alte Datei mit dem angegebenen Namen in seinem Cache hat. Sie sollten die Datei unter einem neuen Namen laden und das Hintergrundbild zurücksetzen.

Answer 2

Hier habe ich ein einfaches Beispiel, das Hintergrundbild beim Klicken auf die Schaltfläche angezeigt wird. In diesem Beispiel habe ich eine Bild-URL genommen und ein zufälliges Bild als Hintergrundbild gesetzt. Das funktioniert gut für mich. Wenn dies nicht für Sie funktioniert, lassen Sie es mich wissen. Nehmen Sie die vollständige URL des Bildes, das Sie hochladen, und legen Sie es auf den Container fest, den Sie als Hintergrundbild festlegen möchten.

$(document).ready(function(){ 
 
var filename = "https://images-na.ssl-images-amazon.com/images/G/01/gateway/editorial/unrec/col-3/shipping-couple._CB509889188_.png"; 
 
//$('#background').css("background-image", "url(" + filename + ")"); 
 
document.getElementById("background").style.backgroundImage="url(" + filename + ")"; 
 
}); 
 

 
$("#changeBG").on("click", function() { 
 
    var newarray = new Array(); 
 
    newarray[0] = "https://images-eu.ssl-images-amazon.com/images/I/41BcvUwPa0L._AC_UL260_SR200,260_.jpg"; 
 
    newarray[1] = "https://images-eu.ssl-images-amazon.com/images/I/31CvVeyn6OL._AC_UL260_SR200,260_.jpg"; 
 
    newarray[2] = "https://images-eu.ssl-images-amazon.com/images/I/51zMvKTKfzL._AC_UL260_SR200,260_.jpg"; 
 
    newarray[3] = "https://images-eu.ssl-images-amazon.com/images/I/31mxJooj4gL._AC_UL260_SR200,260_.jpg"; 
 
    newarray[4] = "https://images-eu.ssl-images-amazon.com/images/I/41brFl-yibL._AC_UL260_SR200,260_.jpg"; 
 
    var randomnumber = randomNumberFromRange(0, 4); 
 
    document.getElementById("background").style.backgroundImage = "url(" + newarray[randomnumber] + ")"; 
 
}); 
 

 
function randomNumberFromRange(min, max) 
 
{ 
 
    return Math.floor(Math.random() * (max - min + 1) + min); 
 
}

#background 
 
{ 
 
    border:1px red solid; 
 
    width:450px; 
 
    height:200px; 
 
    background-color: #FFFFFF; 
 
    background-image: url("images/background.png") 50% 50%; 
 
    background-repeat: no-repeat; 
 
    #background-size: contain; 
 
    background-size: cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="background"> 
 

 
</div> 
 
<input type="button" id="changeBG" value="Change Background Image">