Загрузка и отображение изображения через <input> в JavaScript

Быстрый ответ

Чтобы отобразить изображение, выбранное пользователем, в элементе <img>, данному элементу следует присвоить адрес выбранного файла с помощью JavaScript и API FileReader. Это можно сделать следующим образом: назначьте элементу <input type="file"> обработчик события onchange, считайте файл и присвойте атрибут src элементу <img>, указав URL файла.

document.querySelector('input[type="file"]').onchange = event => {
    let reader = new FileReader();
    reader.onload = e => document.querySelector('img').src = e.target.result;
    reader.readAsDataURL(event.target.files[0]);
};

<input type="file" />
<img />

Убедитесь, что в документе указана правильная идентификация элемента <input> и <img>.

Поддержка совместимости с различными браузерами

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

if (window.FileReader) {
    /* Все идет по плану! Пользователь может загружать изображения 🚀 */
} else {
    /* Срабатывает план Б! 💁‍♂️ */
}

Если в браузерах не поддерживается FileReader, рассмотрите возможность использования других методов загрузки изображений, например, отправки файла на сервер через скрытый <iframe> для его последующего отображения.

Эффективное использование системных ресурсов

Используя URL.createObjectURL, не забывайте удалять созданные URL-объекты с помощью URL.revokeObjectURL, когда они вам больше не понадобятся. Ведь, как говорится, каждый байт на счету! 💾

Управленческая загрузка изображений

Если задача требует детального контроля над процессом загрузки файлов, используйте async/await при работе с FileReader. Кроме того, продумайте корректную обработку ошибок и реализацию промисов.

Визуализация

Процесс загрузки изображения в HTML-элемент <img> через <input type="file"> выполним в следующем порядке:

1. 📁 Пользователь выбирает файл.
2. 🖼️ Файл считывается с помощью FileReader.
3. 📸 Осуществляется обработка данных файла.
4. 🙌 Изображение отображается в элементе `<img>`.

Используйте следующий код страницы:

<input type="file" id="photoInput">
<img id="preview" style="display: none;">

<script>
document.getElementById('photoInput').onchange = function(event) {
    var reader = new FileReader();
    reader.onload = function() {
        var output = document.getElementById('preview');
        output.src = reader.result;
        output.style.display = 'block';
    };
    reader.readAsDataURL(event.target.files[0]);
};
</script>

Основные моменты:

• 📁 пользователь выбирает файл.
• 🖼️ с помощью FileReader подготавливается изображение.
• 📸 происходит обработка данных.
• 🙌 изображение появляется на странице.

Асинхронное чтение файлов: практичник

Использование async/await

async function readImageFile(file) {
    const reader = new FileReader();
    
    return new Promise((resolve, reject) => {
        reader.onload = event => resolve(event.target.result); /* Мы нашли решение. */
        reader.onerror = reject;
        reader.readAsDataURL(file);
    });
}

document.querySelector('input[type="file"]').onchange = async event => {
    try {
        const imageDataUrl = await readImageFile(event.target.files[0]);
        document.querySelector('img').src = imageDataUrl; /* Вот и все! */
    } catch (error) {
        console.error("Ошибка при чтении файла", error); /* Я читаю, следовательно, я существую. */
    }
};

Подробнее об этом расскажет наш спикер на видео

UX с помощью стилей

Приспособьте стили тега <img> таким образом, чтобы изображения отображались оптимальным образом, независимо от их размеров. Для этого используйте свойства max-width и height.

Подготовка к неожиданностям

Реализуйте основу обработки ошибок FileReader и процесса загрузки, как если бы вы всегда брали зонт, когда небо затягивает тучи. ☂️

Управление DOM как настоящий профи

Создание элементов с нуля

Для тестирования функционала создайте элементы <input> и <img> с помощью document.createElement.

jQuery: Это удобно!

Для более компактного и приятного использования синтаксиса при работе с файловыми элементами и изображениями обратитесь к jQuery.

Полезные материалы

1. Использование файлов в веб-приложениях – Web API | MDN — подробное руководство по работе с файлами.
2. JavaScript – Предпросмотр изображения до его загрузки – Stack Overflow — обсуждение с полезными советами по реализации функционала предпросмотра изображений.
3. Чтение файлов в JavaScript – Статьи | web.dev — детальный обзор функционала чтения файлов.
4. Как получить параметры URL и POST с помощью Express | DigitalOcean — руководство по работе с загрузкой файлов на сервер с помощью Express.
5. CodePen — пример живого демонстрации, демонстрирующий функционал.
6. Учебник по использованию FileReader в JavaScript | DigitalOcean — пошаговая инструкция по использованию класса FileReader в JavaScript.