Question

我已经做了很多关于如何做到这一点的研究，但我似乎找不到具体的答案。我试图允许用户从他们的计算机输入文件，并将该文件转换为网页的背景。我的以下代码如下所示：

    <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来确保所选背景被记住，我只是难以获得改变的背景。如果已经有一篇关于如何做到这一点的文章，我将非常感谢它的链接。谢谢！

修改

Nikhil和user6003859向我解释了为什么它无法正常工作。我想我只需要弄清楚如何使用Ajax和PHP来改变它。如果有人对此提出更多建议，我很乐意听到。谢谢大家帮我解决这个问题。

Answer 1

现代浏览器通常会限制对用户本地文件（在本例中为图像）的访问。您尝试做的是通过您从<input type='file' />值获得的路径显示用户本地文件存储中的图像。

您应该做的是将图像上传到您的服务器（可能使用ajax，因此感觉无缝），然后将从您的服务器显示在您的页面上。

编辑：即使这是一个新问题，我还会举例说明如何根据用户提供的网址更改元素的背景：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

出于安全原因，您无法完全使用客户端。

您上传的那一刻说出一张图片，浏览器会给它一个“假路径”，如下所示：

C:\fakepath\<filename>.png

这是浏览器的安全实现 - 浏览器可以防止您访问磁盘结构。

因此，当您在上传后检查输入的值时，您将获得上述伪路径，即。 C:\fakepath\<filename>.png。使用它作为背景显然是行不通的。

通常要实现这一点，您需要先将其存储在服务器中，然后从服务器获取值并应用背景。

Answer 3

最好使用文件阅读器。

<!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>

如何根据用户输入更改背景图像| HTML，CSS，JS

3 个答案: