Question

我有一个文件输入元素。我想附加一个事件侦听器，该事件侦听器将目标元素的背景设置为用户上传的图像。

<input id='file' type='file'/>
<div id='frame'></div>

const frame = document.getElementById('frame');
const file = document.getElementById('file');
file.addEventListener('change', function() {
    // set the background image of `frame` to the uploaded image
});

如何将frame的背景图像设置为用户上传的图像？

Answer 1

您使用Element#files

访问文件

所有元素节点上都有一个文件数组，该文件数组允许访问此列表中的项目。

^{-https://developer.mozilla.org/en-US/docs/Web/API/FileList}

您可以使用FileReader#readAsDataUrl从图像中获取数据URI：

readAsDataURL方法用于读取指定的Blob或File的内容。读取操作完成后，readyState变为DONE，并且触发了loadend。那时，result属性包含数据作为数据：URL表示文件数据为base64编码的字符串。

^{-https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL}

然后您可以将数据URI分配给背景图片属性

const frame = document.getElementById('frame');
const file = document.getElementById('file');
const reader = new FileReader();
reader.addEventListener("load", function () {
  frame.style.backgroundImage = `url(${ reader.result })`;
}, false);
file.addEventListener('change',function() {
  const image = this.files[0];
  if(image) reader.readAsDataURL(image);
}, false)

#frame {
  width: 200px;
  height: 200px;
  background-size: cover;
}

<input id='file' type='file' />
<div id='frame'></div>

Answer 2

将背景图像设置为HTML元素的最佳方法是使用CSS。 CSS background-image属性需要一个URL字符串才能起作用。我们可以使用JavaScript的URL对象中的createObjectURL方法从上传的图像中创建URL。

URL.createObjectURL（）静态方法创建一个DOMString，其中包含表示参数中给定对象的URL。 URL生命周期与创建它的窗口中的文档相关。新对象URL表示指定的File对象或Blob对象。〜MDN Web Docs

因此...

<input id='file' type='file'/>
<div id='frame'></div>


const frame = document.getElementById('frame');
const file = document.getElementById('file');
file.addEventListener('change', function() {
    // access the uploaded image file and generate URL
    const image = file.files[0];
    const bgUrl = URL.createObjectUrl(image);
    // set background image of frame
    frame.style.backgroundImage = `url(${bgUrl})`;
});

如何将元素的背景图片设置为用户上传的图片

2 个答案: