JavaScript如何实现用户选择本地文件设置为div的背景图片

DOM 元素的 style 对象中，backgroundImage 对应的是 CSS 的 background-image 规则，它本身是字符串类型，不存在 src 子属性，给 <img> 元素 src 赋值的逻辑不能直接复用在背景图样式上。

CSS 中 background-image 的取值要求是 url(图片地址) 格式的字符串，因此你需要把生成的本地临时地址拼接进 url() 中后，再赋值给 backgroundImage 属性。

正确的代码如下：

image_file.onchange = function() {
  var files = this.files;
  var file = URL.createObjectURL(files[0]);
  document.getElementById('divID').style.backgroundImage = `url(${file})`;
}

如果设置后看不到背景图，大概率是目标 div 没有设置宽高，你可以提前在 CSS 中给 div 配置好宽高和背景图展示规则，避免显示异常：

#divID {
  /* 必须设置宽高才能看到背景图 */
  width: 400px;
  height: 300px;
  /* 可选的背景图展示配置 */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

内容的提问来源于stack exchange，提问作者Code Clown