Как загружать файл с картинками в текстовое поле js для вывода на страницу?

Question

Делаю задание где нужно загружать картинки на страницу. Реализовал функцию загрузки картинки через её url (вводя url в поле ввода и нажатием на кнопку "Загрузить"). В задание написано, что можно также загружать файл с картинками json. Как реализовать эту функцию? И разве можно передавать файлы в текстовое поле? или я не правильно понял задание. Текст задания на картинке.

const button = document.querySelector('.btn');
const preview = document.querySelector('.preview');

const addByUrl = () => {
    let valueImg = document.querySelector(".searchBox").value;
    let container = document.createElement("div");
    container.classList.add("preview-image");
    let img = document.createElement("img");
    img.src = valueImg;
    img.onload = function() {
        container.appendChild(this);
        preview.prepend(container);
    }
};

button.addEventListener("click", addByUrl)

.searchBox {
    width: 40%;
    outline: none;
}
.preview {
    display: flex;
    flex-wrap: wrap;
}
.preview-image {
    height: 20vh;
    margin: 5px;
}
.preview-image img {
    height: 100%;
}

<input type="text" class="searchBox" value="" />
<input type="button" class="btn" value="Загрузить" />

<div class="preview">
</div>

Answer 1

В задании предполагалось прочитать файл json и вывести список url-ов.

Можно скопировать этот текст, создать файл urls.json на рабочем столе и попробовать этот пример:

[
  "https://cdn.pixabay.com/photo/2019/02/07/21/20/animals-3982204_960_720.jpg",
  "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819_960_720.jpg"
]

Куда надо сходить FileReader

let preview = document.querySelector('div')

function imgAppend(url) {
  let img = document.createElement('img')
  img.src = url
  preview.appendChild(img)
}

function parse(text) {
  try {
    JSON.parse(text).forEach((url) => imgAppend(url))
  } catch (e) {
    console.error(e)
  }
}

function readFile(file) {
  let reader = new FileReader()
  reader.onload = () => parse(reader.result)
  reader.onerror = () => console.error(reader.error)
  reader.readAsText(file)
}

const input = document.querySelector('input[type="file"]')
input.addEventListener('change', (e) => {
  if (e.target.files.length) {
    readFile(e.target.files[0])
  }
})

<input type='file' accept='application/json'>
<div></div>

БЛОГ НА HUSL

Как загружать файл с картинками в текстовое поле js для вывода на страницу?

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