如何根据用户输入更改背景图像| 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

回答

相关问题