如何在HTML JAVASCRIPT中让用户浏览电脑选择一个背景图片

How can I let users browse there computer to choose a background image in HTML JAVASCRIPT

本文关键字：选择 背景图片 一个 电脑 浏览 HTML JAVASCRIPT 用户      更新时间：2023-09-26

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

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

用户名:演示

密码: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)" />

但是我不能让它与我当前的代码工作(请参考演示)

Thanks in advance

PS我不是HTML和javascript方面的专家，所以我无法理解真正复杂的代码

总之，您不能以这种方式使用file输入。出于安全原因，JavaScript不能访问用户的直接机器。这个输入只是允许一个文件在HTTP POST请求的正文中通过web流传递。

要完成您想要的，您必须使用服务器端语言(如PHP或ASP.NET)上传文件服务器端。然后，您可以保存并存储它，允许它在用户访问时作为背景显示。

并非不可能!

你可以使用这个插件将这个功能添加到你的网站中

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

相关文章：