Как выводить одно превью при загрузке изображения?

Для вывода одного превью при загрузке изображения в JavaScript вы можете использовать функцию FileReader и элемент HTML Image.

Сначала добавьте на страницу элемент input типа file, который позволит пользователю выбрать изображение для загрузки:

<input type="file" id="imageUpload" accept="image/*">
<div id="previewContainer"></div>

Затем добавьте скрипт, который будет обрабатывать выбранное изображение:

// Получаем элементы HTML
const imageUpload = document.getElementById('imageUpload');
const previewContainer = document.getElementById('previewContainer');

// Обработка загрузки изображения
imageUpload.addEventListener('change', (event) => {
  // Проверяем, было ли выбрано изображение
  if (event.target.files && event.target.files[0]) {
    // Создаем объект FileReader
    const reader = new FileReader();

    // Читаем содержимое выбранного файла
    reader.onload = (event) => {
      // Создаем элемент img для отображения превью изображения
      const img = document.createElement('img');
      img.src = event.target.result;

      // Очищаем контейнер превью перед добавлением нового изображения
      previewContainer.innerHTML = '';

      // Добавляем превью изображения в контейнер
      previewContainer.appendChild(img);
    };

    // Чтение файла в формате Data URL
    reader.readAsDataURL(event.target.files[0]);
  }
});

При выборе изображения пользователем, используя обработчик событий 'change', мы проверяем, было ли выбрано изображение. Если выбрано, мы создаем объект FileReader, чтобы прочитать содержимое файла. После загрузки файла в объект FileReader, мы создаем элемент img и устанавливаем значение src равным результату чтения файла в формате Data URL. Затем мы очищаем контейнер превью и добавляем созданное изображение в контейнер.

В результате, при выборе изображения пользователем, оно будет загружено и отображено в контейнере превью на странице.

Обратите внимание, что данная реализация использует FileReader API, который поддерживается в современных браузерах. Если вы предпочитаете использовать альтернативные подходы или работать с более старыми браузерами, вам может потребоваться использовать другие методы загрузки и отображения изображений.