如何在HTML中使用用户上传的图片作为页面背景？

浏览器的安全机制限制：<input type="file">的value属性返回的是伪路径（比如C:\fakepath\image.jpg），而非本地文件的真实路径，直接用这个值作为url()的参数，浏览器无法正确读取本地图片，导致背景不显示。

需要通过File API获取文件的可访问URL，有两种常用方式：

方式1：使用URL.createObjectURL()（推荐，性能更优） #

这个方法会生成一个指向本地文件的临时URL，无需读取文件内容，效率更高。

完整代码示例 #

<input type="file" name="selectBackground" id="selectBackground" accept="image/png, image/jpeg">

<script>
const selectBackground = document.getElementById('selectBackground');
selectBackground.addEventListener('change', function() {
  // 检查是否有选中文件
  if (this.files.length === 0) return;
  
  const file = this.files[0];
  // 生成临时URL
  const imageUrl = URL.createObjectURL(file);
  
  // 设置页面背景
  document.body.style.background = `#4d3325 url('${imageUrl}') no-repeat center center fixed`;
  document.body.style.backgroundSize = 'auto 100%';
  
  // 页面卸载时释放临时URL（可选，浏览器也会自动回收）
  window.addEventListener('unload', () => {
    URL.revokeObjectURL(imageUrl);
  });
});
</script>

方式2：使用FileReader #

通过读取文件内容为Data URL（base64格式），适合需要对文件内容做额外处理的场景。

完整代码示例 #

<input type="file" name="selectBackground" id="selectBackground" accept="image/png, image/jpeg">

<script>
const selectBackground = document.getElementById('selectBackground');
selectBackground.addEventListener('change', function() {
  if (this.files.length === 0) return;
  
  const file = this.files[0];
  const reader = new FileReader();
  
  reader.onload = function(e) {
    const imageUrl = e.target.result;
    document.body.style.background = `#4d3325 url('${imageUrl}') no-repeat center center fixed`;
    document.body.style.backgroundSize = 'auto 100%';
  };
  
  // 读取文件为Data URL
  reader.readAsDataURL(file);
});
</script>

• 必须监听input的change事件：只有当用户选择文件后，才能获取到文件对象，不能直接在页面加载时读取value。
• 验证文件类型：虽然accept属性做了限制，仍可通过file.type二次校验，确保是图片文件。

内容的提问来源于stack exchange，提问作者Rachel Christiana