Открытие диалога выбора файла в js: альтернативные методы

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

Упростите свою работу следующим образом: создайте скрытый элемент input с типом file и симулируйте его клик в программном коде.

const inputElement = document.createElement('input');
inputElement.type = 'file';
inputElement.style.display = 'none'; 
document.body.appendChild(inputElement);

inputElement.click();

inputElement.onchange = (e) => console.log(e.target.files);

document.body.removeChild(inputElement);

Детали реализации

Выбор нескольких файлов и типов файлов

Давайте разрешим выбор нескольких файлов, при этом укажем, что нас интересуют только изображения.

inputElement.multiple = true;
inputElement.accept = 'image/*';

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

Чтение файлов

Воспользуемся API FileReader для работы с файлами.

inputElement.onchange = async (e) => {
    const files = e.target.files;
    for (const file of files) {
        const reader = new FileReader();
        
        reader.onload = (readerEvent) => {
            // Обработка данных файла
        };

        if (file.type.startsWith('image/')) {
            reader.readAsDataURL(file);
        } else {
            reader.readAsText(file, 'UTF-8');
        }
    }
};

Модификация внешнего интерфейса. 🐊

Применим элементы label и span/button для улучшения взаимодействия с пользователем.

<label for="fileInput" class="custom-file-input">Выберите файл</label>
<input id="fileInput" type="file" style="display: none;"/>

Сообщения о результатах загрузки

Отображаем пользователю уведомления о результатах загрузки или о возникших ошибках.

reader.onload = (readerEvent) => {
    // Файл успешно загружен
};

reader.onerror = () => {
    alert("Во время чтения файла произошла ошибка.");
};

Использование загруженных данных

Ниже приведен пример использования данных, полученных из загруженного файла:

reader.onload = (readerEvent) => {
    document.body.style.backgroundImage = `url(${readerEvent.target.result})`;
};

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

Преобразуйте ваш веб-сайт так, чтобы пользователь мог с лёгкостью загружать контент.

  Было: Море возможностей
  Стало: Ваши избранные контенты всегда с вами

Сразу после "клика" пользователем запускается процесс выбора файла:

  Действия пользователя: Нажатие на кнопку
  Реакция JavaScript: Отображение диалога выбора файла

Возможные проблемы

Кроссбраузерность

Не забудьте протестировать работу кода во всех браузерах, чтобы избежать неприятных сюрпризов.

Безопасность

Будьте бдительны, работая с неизвестными файлами. Безопасность превыше всего.

Производительность

Стоит помнить, что большие файлы и множественные операции чтения могут негативно отразиться на производительности процессора.

Доступность

При написании кода учитывайте атрибуты ARIA и удобство навигации при помощи клавиатуры.

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

1. Html тэг <input type="file"> – HTML | MDN
2. HTML-стандарт
3. Свойства и методы элементов форм в JavaScript
4. Можно ли в JavaScript симулировать событие "click" для элемента выбора файла? – Stack Overflow
5. Dropzone – простая для использования библиотека drag'n'drop с предпросмотром и индикаторами загрузки
6. Обзор чтения файлов в JavaScript | Статьи | web.dev