noder_ss
@noder_ss
Человек хороший, вёрстка по душе

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

Как сделать, чтобы при выборе файлов(например, картинок) они отображались на сайте? type="file". покажите на примере код
  • Вопрос задан
  • 114 просмотров
Решения вопроса 1
mizutsune
@mizutsune
Simplicity is the ultimate sophistication.
Если нужно в стиле превью отобразить выбранное изображение до отправки на сервер, тогда можно сделать например вот так:

<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);
});


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы