Как создать изображение из файла, который пользователь загрузил в инпут или перетащил

Question

Можно ли мне как-то создать изображение из экземпляра класса File.

Получаю изображени при перетаскивании

dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

dragover(e) {
  e.stopPropagation();
  e.preventDefault();
} 
drop(e) {
  e.stopPropagation();
  e.preventDefault();

  const dt = e.dataTransfer;
  const files = dt.files;
  const imgFile  = files[0];
}

как мне создать изображение чтобы я мог добавить его на страницу

Answer 1

Необходимо использовать FileReader

input.onchange = function(file) {
  let reader = new FileReader();
  reader.onload = () => img.src = reader.result;
  reader.readAsDataURL(file.target.files[0]);
};

<input id="input" type='file' accept='image/*' ><br>
<img id='img'>

Answer 2

Подробнее на MDN, похожий пример в конце статьи

const fileInput = document.getElementById('unique');
const imgElement = document.getElementById('img');

// Простой пример
fileInput.addEventListener('change', function(){
  if(this.value) {
    const img = this.files[0];
    const imgUrl = window.URL.createObjectURL(img);
    imgElement.src = imgUrl;
  }
})

<input type="file" id="unique" accept="image/*"/>
<img id="img"/>

БЛОГ НА HUSL

Как создать изображение из файла, который пользователь загрузил в инпут или перетащил

Ответы (2 шт):