0

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

演示：http: //goo.gl/253IN

用户名：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：

<input id="test" type="file" onchange="loadImageFile(this)" />

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

提前致谢

PS我不是HTML和Javascrpit方面的专家（还：D），所以我无法理解真正复杂的代码

4

2 回答 2

1

简而言之，您不能file以这种方式使用输入。出于安全原因，JavaScript 无法访问用户直接机器。此输入仅允许文件通过 HTTPPOST请求正文中的 Web 流传递。

要完成您想要的，您必须使用服务器端语言（例如or ）上传文件服务器端。然后，您可以将其保存并存储，以便在用户访问时将其显示为用户背景。PHPASP.NET

于 2013-03-05T21:34:49.510 回答
0

根本不可能！

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

https://github.com/CybrSys/custom-background.js

于 2014-10-27T07:57:35.430 回答