如何使用输入类型="file"将图像设置为html中的背景图像？

Question

我正在创建一个可以接收图像并将其设置为背景图像的网页。

我目前的工作：

function a(a) {
  document.body.style.backgroundImage = "url(a.value)";
}

<input type="file" onchange="a(this);">

由于值为C:\fakepath\Image.extension，背景没有改变。那么，你能帮我只使用 javascript 来做到这一点吗？我知道这是一个非常奇怪的问题。但它会帮助我学习新东西，也可以帮助其他人。

Answer 1

您需要使用 HTML5 FileReader API 读取所选文件的内容，然后对其进行 base64 编码 Data-URL。然后你可以把这个URL设置为任何东西的背景。

如果您不知道 Data-URL 是一种不指向文件位置的 URI，而是将文件的全部内容以 base64 编码格式保存在 URL.任何文件都可以转换为Data-URL。您可以阅读更多相关信息 here。

注意： Data-URI 仅适用于小文件。不要将兆字节大小的文件转换为 Data-URI.

function previewFile(fileInput) {
  var file = fileInput.files[0];
  var reader = new FileReader();

  reader.addEventListener("load", function() {
    setBackground(reader.result);
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}
function setBackground(imageURL){
    document.body.style.backgroundImage = "url(" + imageURL + ")";
    document.body.style.backgroundSize = "100% auto";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundPosition = "center top";
}

<input type="file" onchange="previewFile(this);">

Answer 2

只需将文件 blob 包装到 Object-URL (URL.createObjectURL) 并将其设置为 CSS 背景图像的来源。

这会简化您的代码，图像处理速度会更快，图像大小问题也会减少：

document.querySelector("input").onchange = function() {
  var url = URL.createObjectURL(this.files[0]);
  document.body.style.background = "url(" + url + ") no-repeat";
}

<input type="file">

如何使用输入类型="file"将图像设置为html中的背景图像？

How to set an image as a background image in html using input type="file"?

html

javascript

input-type-file