Как создать выпадающий список для выбора файлов на веб-странице?

Как можно создать выпадающий список для выбора файлов, чтобы объединить элементы <b>select</b> и <b>input</b>? Каким образом можно установить <b>input</b> в каждом <b>option</b> так, чтобы разрешалось выбирать файл из одного списка? Необходимо обработать выбранный файл в зависимости от его типа, разрешая выбирать либо один, либо другой тип файлов.
  • 1 апреля 2024 г. 20:29
Ответы на вопрос 1
Для создания выпадающего списка для выбора файлов на веб-странице можно использовать комбинацию элементов <select> и <input type="file">. 

Пример кода:

```html
<form>
    <select id="fileType" onchange="showFileInput()">
        <option value="image">Изображение</option>
        <option value="document">Документ</option>
    </select>
    
    <input type="file" id="fileInput" style="display: none">
</form>

<script>
    function showFileInput() {
        var fileType = document.getElementById('fileType').value;
        if (fileType === 'image') {
            document.getElementById('fileInput').setAttribute('accept', 'image/*'); // Разрешаем выбирать изображения
        } else if (fileType === 'document') {
            document.getElementById('fileInput').setAttribute('accept', '.pdf,.doc,.docx'); // Разрешаем выбирать документы
        }
        
        document.getElementById('fileInput').style.display = 'block'; // Показываем элемент input
    }
</script>
```

В данном примере, при выборе опции из выпадающего списка, мы устанавливаем соответствующий тип файлов, который разрешено выбирать в элементе <input type="file">. Элемент <input> показывается пользователю только после выбора опции из выпадающего списка.

Далее можно добавить обработчик события для загрузки выбранных файлов и выполнения соответствующих действий в зависимости от их типа.
Похожие вопросы