Как сделать, чтобы при выборе файлов(например, картинок) они отображались на сайте?

Question

[Noder SS]

Как сделать, чтобы при выборе файлов(например, картинок) они отображались на сайте? type="file". покажите на примере код

Comments

[Антон Литвиненко]

Что значит при выборе? Для того чтобы после загрузки файл попал на сайт(картинка) нужен вполне себе бекенд

[Noder SS]

Антон Литвиненко, тогда дело закрыто

Answer 1

[Dino Winchester]

Если нужно в стиле превью отобразить выбранное изображение до отправки на сервер, тогда можно сделать например вот так:

<input type="file" id="file" value="Change Image">
<img class="picture" alt="demo">

const picture = document.querySelector(".picture");
const inputFile = document.querySelector("#file");

inputFile.addEventListener("change", ({ target: t }) => {
     const [file] = t.files;

     if (!file) return;

     if (!file.size) return;

     const reader = new FileReader();

     reader.onload = () => {
          picture.src = reader.result;
     };

     reader.readAsDataURL(file);
});

Пример достаточно простой, без всяких дополнительных проверок(которые можно обойти), но думаю для начала пойдет.

Comments

[Noder SS]

Спасибо, помогло