Jqueryは動的に背景画像を置き換えます

Question

私はユーザーが特定のDIVの背景画像を動的に変更できるようにしようとしています。彼らはHTMLフォームを使って画像をアップロードしています。画像がアップロードされると、JQueryを使ってDIVの背景を更新しています。

私はこの前に何度か聞いたことがありますが、私は背景画像を置き換えることができますが、新しい画像をアップロードして再び変更したい場合は動作しません。

画像は1回しか変更できません。ページを更新しない限り、その後の変更は行われません。

マイDIVが

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

次のCSSを使用しているロード時DIVは、デフォルトの背景画像を持って、ユーザーは、私は新しいアップロードされたファイルに画像を変更するフォームを介して画像をアップロードして、次のjQueryを使って。

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

filenameは、アップロードされたファイルの名前です。これはすべて正常に動作し、新しい画像が表示されます。

別のファイルをアップロードした場合、ファイルがアップロードフォルダで正しく変更されたことがわかりますが、DIVの背景は変更されません。

私が気付いた事は、最初の変更後にChromeがDIV用のCSSを示しています。 background-image: url(images/bacground.png);の場合、DIVのスタイルには新しいファイルの名前がバックグラウンドとして割り当てられているように見えます。

バックグラウンドを好きなだけ変更できるようにするにはどうすればよいですか？ jqueryのは、常にあなたのCSSファイルからのスタイルよりも高い優先度を持つ要素のインラインスタイルとして、背景画像を設定するためのクロムが、チェックを外すあなたのbackground-imageスタイルを設定することを不思議ではない

おかげ

Answer 1

。

おそらく、新しいファイルで古いファイルを変更します。名前が同じで、キャッシュに特定の名前の古いファイルがあるため、Chromeは背景を更新しない可能性があります。ファイルを新しい名前でロードし、背景イメージをリセットする必要があります。

Answer 2

ここでは、ボタンをクリックすると背景画像が表示される簡単な例を示しました。この例では、イメージURLの配列を取り、ランダムイメージを背景イメージとして設定しています。これは私のためにうまく動作します。これはあなたのために動作しない場合は、私に知らせてください。アップロードしている画像の完全なURLを取得し、背景画像として設定するコンテナに設定します。

$(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">