我如何让用户浏览那里的计算机来选择HTML JAVASCRIPT中的背景图像

我试图允许用户浏览他们的文档，并选择一张图片作为背景图像。我已经了解了用户如何使用URL更改背景图像。请在下面找到演示：

演示：

用户名：demo

密码：demo1

我不知道怎样才能让它和

文件字段

我找到了下面我想用的东西。发现问题

JavaScript:

$(switchBackground);
var oFReader = new FileReader(),
    rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function(oFREvent) {
    localStorage.setItem('b', oFREvent.target.result);
    switchBackground();
};

function switchBackground() {
  $('body').css('background-image', "url(" + localStorage.getItem('b') + ')');    
}

function loadImageFile(testEl) {
  if (! testEl.files.length) { return; }
  var oFile = testEl.files[0];
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
  oFReader.readAsDataURL(oFile);
}

HTML:

但是，我无法让它与我当前的代码一起工作（请参阅演示）

提前谢谢

---

PS我不是HTML和Javascrpit方面的专家（还不是：D），因此我无法理解真正复杂的代码。简而言之，您不能以这种方式使用

文件输入。出于安全原因，JavaScript无法访问users direct计算机。此输入只允许在HTTP
POST
请求体中通过web流传递文件

要实现您想要的功能，您必须使用服务器端语言（如
PHP
或
ASP.NET
）上传文件服务器端。然后，您可以将其保存并存储，以便在用户访问时将其显示为背景。
这并非不可能

您可以使用此插件将此功能添加到您的网站

好的。谢谢你的帮助，你解释得很好@GioL没问题，伙计。很高兴我能帮忙。祝你好运，编码快乐！：）
<input id="test" type="file" onchange="loadImageFile(this)" />