Управление HTML DOM с ванильным JavaScript

Авторизоваться

Мы готовим разметку для ввода файла, которая позволяет выбрать изображение, и элемент img для предварительного просмотра выбранного файла.

<input type="file" id="fileInput" />

<img id="preview" />

Оба элемента могут быть взяты методом getElementById():

const fileEle = document.getElementById('fileInput');
const previewEle = document.getElementById('preview');

1. Используйте метод URL.createObjectURL()

fileEle.addEventListener('change', function(e) {
    // Get the selected file
    const file = e.target.files[0];

    // Create a new URL that references to the file
    const url = URL.createObjectURL(file);

    // Set the source for preview element
    previewEle.src = url;
});

2. Используйте метод readAsDataURL() для FileReader

fileEle.addEventListener('change', function(e) {
    // Get the selected file
    const file = e.target.files[0];

    const reader = new FileReader();
    reader.addEventListener('load', function() {
        // Set the source for preview element
        previewEle.src = reader.result;
    });

    reader.readAsDataURL(file);
});

Чтобы оставить комментарий, необходимо авторизоваться

Войти на сайт

Как управлять DOM на чистом JavaScript?

1. Используйте метод URL.createObjectURL()

2. Используйте метод readAsDataURL() для FileReader