Как сделать preview img by input file?

Для создания просмотра предварительного просмотра изображения при выборе файла в поле ввода файла (input file) в JavaScript, вы можете использовать следующий код:

1. HTML разметка:

<input type="file" id="fileInput" accept="image/*">
<div id="imagePreview"></div>

2. JavaScript код:

const fileInput = document.getElementById('fileInput');
const imagePreview = document.getElementById('imagePreview');

fileInput.addEventListener('change', function() {
  const file = this.files[0];
  
  if (file) {
    const reader = new FileReader();

    reader.addEventListener('load', function() {
      const image = new Image();
      image.src = this.result;
      
      imagePreview.innerHTML = '';
      imagePreview.appendChild(image);
    });

    reader.readAsDataURL(file);
  }
});

Объяснение кода:

- В HTML разметке создается элемент input с типом "file" и идентификатором "fileInput". Также создается элемент div с идентификатором "imagePreview", который будет использоваться для отображения превью изображения.
- В JavaScript коде мы получаем ссылки на элементы DOM с помощью их идентификаторов.
- Затем мы добавляем слушатель события "change" к элементу fileInput. Это событие происходит, когда пользователь выбирает файл в поле ввода файла.
- Внутри обработчика события мы получаем выбранный файл при помощи this.files[0]. При необходимости вы можете получить доступ к другим выбранным файлам, например, this.files[1] для второго файла.
- Затем мы создаем экземпляр FileReader и добавляем слушатель события "load". Событие "load" происходит, когда операция чтения входных данных успешно завершена.
- Внутри обработчика события "load" мы создаем новый объект Image и устанавливаем его источником ссылку на данные в формате Data URL, полученные при чтении файла.
- После этого мы очищаем содержимое элемента imagePreview и вставляем в него элемент img с предварительным просмотром изображения.

Таким образом, при выборе файла в поле ввода файла, код будет читать файл и отображать его превью в элементе imagePreview.