Как установить фоновое изображение элемента для загруженного пользователем изображения

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}

Вы можете получить URI данных из изображения, используя FileReader#readAsDataUrl:

Метод readAsDataURL используется для чтения содержимого указанного BLOB-объекта или файла. Когда операция чтения завершена, readyState становится DONE и запускается загрузка. В то время атрибут результата содержит данные в виде данных: 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>