Как вывести изображение после загрузки?

Question

[Nik Faraday]

Здравствуйте!

Вроде бы элементарный вопрос, но что-то не могу разобраться. Есть у меня input type file. Так же стоит функция
$('#...').change(() => { ... });
Которая срабатывает после загрузки изображения. Так вот, мне нужно это изображение, сразу после загрузки, вывести в тег , но я не могу понять, как это сделать, т.к. после вывода элемента в консоль выводит следующее (Это значение самого инпута type file .files[0]):


Что из этого мне нужно закинуть в тег , что бы отобразить эту фотографию?

Answer 1

[Сергей Соколов]

вот пример:

function handleFiles(files) {
  for (let i = 0; i < files.length; i++) {
    const file = files[i];

    if (!file.type.startsWith('image/')){ continue }

    const img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.

    const reader = new FileReader();
    reader.onload = (e) => { img.src = e.target.result; };
    reader.readAsDataURL(file);
  }
}

Comments

[Nik Faraday]

Спасибо, мне лично вот такой вариант помог "Функция обработки изображения" через ULR.createObjectURL