У вас есть файл входного типа, и вы хотите динамически просмотреть изображение после его выбора.

В этой статье мы рассмотрим, как этого добиться с помощью ванильного JavaScript.

Прежде всего, давайте подробнее рассмотрим необходимую разметку HTML.

<input type=”file” accept=”.jpg, .jpeg, .png” id="file-upload"> 
<img src="#" alt="Preview Uploaded Image" id="file-preview">

Как вы могли заметить, тип ввода должен быть установлен на файл. Также желательно установить значения атрибута accept. Другие допустимые способы вставки значений для принятия атрибута: image/jpg, image/gif или просто image/*. Последний позволит загружать на страницу файлы с любым расширением изображения.

Атрибут id file-preview внутри тега img будет использоваться для получения элемента с помощью Javascript, чтобы мы могли загрузить туда изображение.

После этого мы можем перейти к части JavaScript, где нам нужно сначала получить элемент ввода, а затем добавить к нему прослушиватель событий.

const input = document.getElementById(‘file-upload’);
input.addEventListener('change', previewPhoto);

Приемник событий Change срабатывает каждый раз, когда пользователь выбирает изображение. Именно тогда мы хотим, чтобы наше изображение стало видимым на странице. Именно для этого будет вызвано функциональное выражение с именем previewPhoto.

const previewPhoto = () => {
    const file = input.files;
    if (file) {
        const fileReader = new FileReader();
        const preview = document.getElementById('file-preview');
        fileReader.onload = event => {
            preview.setAttribute('src', event.target.result);
        }
        fileReader.readAsDataURL(file[0]);
    }
}

В этом функциональном выражении мы создаем объект new FileReader, который позволяет нам читать файлы, хранящиеся на машине пользователя, которые пользователь выбрал через файл типа ввода.

После загрузки объекта event.target.result будет содержать загружаемый URL-адрес в результате вызванного метода readAsDataURL. Этот URL-адрес, в свою очередь, может быть передан в качестве второго аргумента внутри метода setAttribute для желаемого объекта.

Наконец, мы можем ожидать, что наш JavaScript будет выглядеть так:

const input = document.getElementById('file-input');
const previewPhoto = () => {
    const file = input.files;
    if (file) {
        const fileReader = new FileReader();
        const preview = document.getElementById('file-preview');
fileReader.onload = function (event) {
            preview.setAttribute('src', event.target.result);
        }
        fileReader.readAsDataURL(file[0]);
    }
}
input.addEventListener("change", previewPhoto);

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

Теперь вы можете успешно просмотреть изображение на экране после того, как оно было выбрано.