Как просмотреть изображение перед его загрузкой с помощью JavaScript? ⇐ Javascript

[Anonymous]

Я пытаюсь разрешить пользователям просматривать изображение перед его загрузкой на сервер.
У меня есть HTML-код, и я хочу показать небольшой предварительный просмотр выбранного изображения сразу после того, как пользователь его выберет.
Я пробовал использовать FileReader, но не уверен, что делаю это правильно.
Изображение не отображается, или иногда у меня появляется пустой предварительный просмотр.
Вот мой код ниже. Может ли кто-нибудь сказать мне, что я делаю неправильно или как правильно просмотреть изображение перед загрузкой с помощью JavaScript?

Код: Выделить всё

Image Preview Before Upload


Upload and Preview Image





const imageInput = document.getElementById('imageInput');
const preview = document.getElementById('preview');

imageInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
preview.style.display = 'block';
}
reader.readAsDataURL(file);
}
});


`

Подробнее здесь: https://stackoverflow.com/questions/797 ... javascript