如何根據用戶輸入更改背景圖像| HTML，CSS，JS

我已經做了大量的研究如何做到這一點，但我似乎無法找到具體的答案。我試圖讓用戶從他們的計算機輸入一個文件，並將該文件轉換爲網頁的背景。我下面的代碼如下所示：如何根據用戶輸入更改背景圖像| 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來確保選定的背景被記住，我只是無法獲得背景改變。如果已經有關於如何做到這一點的文章，我將很感激鏈接。謝謝！

編輯

尼基爾和user6003859向我解釋爲什麼它不工作。我想我只需要弄清楚如何使用Ajax和PHP來改變它。如果有人對此有更多的建議，我很樂意聽到它。謝謝大家幫我解決這個問題。

來源

2017-02-18 TyDoesStuff

現代瀏覽器通常限制訪問用戶的本地文件（在本例中爲圖像）。你要做的是從用戶的本地文件存儲中，通過你從<input type='file' />值得到的路徑顯示一個圖像。

你應該做的是將圖像上傳到服務器（可能使用ajax，因此感覺無縫），然後在服務器上顯示文件到您的頁面上。

編輯：儘管這是怎樣的一個新的問題，我給你如何根據用戶提供的URL更改元素的背景一個例子：

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>

來源

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

這是瀏覽器的安全實施 - 瀏覽器保護您無法使用磁盤結構。

因此，當你上傳後檢查輸入的值，你會得到上述fakepath即。 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

回答

相關問題