ユーザー入力に基づいて背景イメージを変更する方法| HTML、CSS、JS

私はこれを行う方法について多くの研究を行ってきましたが、具体的な答えを見つけることはできません。私は、ユーザーが自分のコンピュータからファイルを入力し、そのファイルをWebページの背景に変えることを許可しようとしています。私の次のコードは、以下の通りである：誰かが私はこの作業を取得するために何をする必要があるか私に説明してください可能性がありユーザー入力に基づいて背景イメージを変更する方法| HTML、CSS、JS

<head> 
     <script> 
      function changeBackground() { 
       var input = document.getElementById("background").value; 
       localStorage.setItem("Background", input); 
       var result = localStorage.getItem("Background"); 
       $('body').css({ 'background-image': "url(" + result + ")" }); 
      } 
     </script> 
    </head> 
    <body> 
     <input id="background" type="file" onchange="changeBackground()"> 
    </body>

場合、私は非常にそれをいただければ幸いです。私はすでに、選択された背景が記憶されていることを確認するためにlocalStorageを使用する必要があることを理解しています。これを行う方法に関する記事がすでにある場合は、そのリンクに感謝します。ありがとう！

EDIT

それが機能しない理由ニキルとuser6003859は私に説明しました。私はそれを変更するためにAjaxとPHPを使用する方法を理解する必要があると思います。誰かがこれについてもっとアドバイスを持っているなら、私はそれを聞いてみたい。この問題を解決するために皆様に感謝します。

出典

2017-02-18 TyDoesStuff

最近のブラウザでは、通常、ユーザーのローカルファイル（この場合はイメージ）へのアクセスが制限されます。あなたがしようとしているのは、<input type='file' />値から得たパスを経由して、ユーザーのローカルfilestorageからのイメージを表示することです。

あなたの代わりにサーバーにイメージをアップロードしています（おそらく、ajaxを使用しているので、シームレスに感じます）。サーバからのファイルをに表示しています。

EDITは：

var inp = document.getElementById('inp'); 
 
var res = document.getElementById('res'); 
 

 
inp.oninput = function() 
 
{ 
 
    res.style.backgroundImage = 'url(' + inp.value + ')'; 
 
};

div 
 
{ 
 
    width: 5em; 
 
    height: 5em; 
 
}

<input type='text' id='inp' /> 
 
<div id='res'> 
 
</div>

：これは、新しい質問の一種ですが、私はあなたにユーザーから提供されたURLに基づいて要素の背景を変更する方法の一例をあげます

出典

2017-02-18 01:49:19 user6003859

あなたは、私はいくつかのコードでこれを行うことができる方法を説明していただけますか？私はそれをどのように実行するかについてはあまりよく分かりません。 – TyDoesStuff

http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload – user6003859

ユーザーが画像のURLを入力できるようにするとどうなりますか？どうすればいい？ – TyDoesStuff

セキュリティ上の理由から、クライアント側ではこれを行うことはできません。

アップロード画像を言った瞬間、ブラウザはそれをそうのような「fakepath」を与える：

C:\fakepath\<filename>.png

をこれは、ブラウザのセキュリティの実装です - ブラウザはアクセスからあなたを保護していますディスク構造。

アップロード後に入力値をチェックすると、上記のような偽のパスが取得されます。 C:\fakepath\<filename>.png。これをバックグラウンドとして使用すると、明らかに機能しません。

通常、これを実現するには、最初にサーバーに格納し、サーバーから値を取得してバックグラウンドを適用する必要があります。

出典

2017-02-18 01:58:18

ファイルリーダーを使用することをお勧めします。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script> 
 
     $(document).ready(function(){ 
 
      $("#file").change(function(){ 
 
        var length=this.files.length; 
 
         if(!length){ 
 
          return false; 
 
         } 
 
         changeBackground(this); 
 
       }); 
 
     }); 
 
     
 
     // Creating the function 
 
     function changeBackground(img){ 
 
      var file = img.files[0]; 
 
      var imagefile = file.type; 
 
      var match= ["image/jpeg","image/png","image/jpg"]; 
 
        if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]))){ 
 
         alert("Invalid File Extension"); 
 
        }else{ 
 
         var reader = new FileReader(); 
 
         reader.onload = imageIsLoaded; 
 
         reader.readAsDataURL(img.files[0]); 
 
        } 
 
      function imageIsLoaded(e) { 
 
        $('body').css({ 'background-image': "url(" + e.target.result + ")" }); 
 
      
 
        }  
 
      } 
 
</script> 
 
</head> 
 
<body> 
 
<input type="file" name="" id="file" value="Click"> 
 
</body> 
 
</html>

出典

2017-02-18 02:09:21

あなたのコードを使ってみました。要件に合わせて変更する必要があるものはありますか？それは私のために働いていません。 – TyDoesStuff

申し訳ありません。私は答えを編集し、私のウェブサイトhttp://code.whquery.com/?data=58a7e2181c7dcであなたのためのデモを追加しました –

ユーザー入力に基づいて背景イメージを変更する方法| HTML、CSS、JS

答えて

関連する問題