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

[Anonymous]

Я работаю над простой функцией загрузки изображений с использованием JavaScript.
Я хочу, чтобы пользователи могли просматривать изображение, которое они выбирают, на своем компьютере, прежде чем оно будет загружено на сервер.
Я попробовал использовать URL.createObjectURL, но он не отображает предварительный просмотр изображения правильно — возможно, я что-то упускаю.
Как мне правильно отобразить выбранное изображение для предварительного просмотра в теге раньше загружаете?

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

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

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

reader.addEventListener("load", function() {
preview.setAttribute("src", this.result);
preview.style.display = "block";
});

reader.readAsDataURL(file);
} else {
preview.style.display = "none";
preview.setAttribute("src", "");
}
});

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

Upload and Preview Image

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