Как отобразить на странице несколько полей для загрузки файлов при помощи элемента input с типом file?

Как можно реализовать функцию на JavaScript, которая будет выводить файлы в определенном формате с использованием тега <br/>?
  • 30 марта 2024 г. 9:09
Ответы на вопрос 1
1. Для отображения нескольких полей для загрузки файлов на странице с помощью элемента input с типом file можно использовать следующий HTML код:

```html
<form>
    <label for="file1">Файл 1:</label>
    <input type="file" id="file1" name="file1"><br>
    
    <label for="file2">Файл 2:</label>
    <input type="file" id="file2" name="file2"><br>
    
    <label for="file3">Файл 3:</label>
    <input type="file" id="file3" name="file3"><br>
</form>
```

2. Для реализации функции на JavaScript, которая будет выводить выбранные файлы в определенном формате с использованием тега `<br/>`, можно использовать следующий код:

```javascript
function displayFiles() {
    let inputElements = document.getElementsByTagName('input');
    let filesList = document.getElementById('filesList');

    for (let i = 0; i < inputElements.length; i++) {
        if (inputElements[i].type === 'file') {
            let files = inputElements[i].files;
            if (files.length > 0) {
                for (let j = 0; j < files.length; j++) {
                    let fileName = files[j].name;
                    let fileSize = files[j].size;

                    filesList.innerHTML += `${fileName} (размер: ${fileSize} bytes)<br>`;
                }
            }
        }
    }
}
```

Пример HTML кода для вывода файлов:

```html
<button onclick="displayFiles()">Показать выбранные файлы</button>
<div id="filesList"></div>
```

При нажатии на кнопку "Показать выбранные файлы" функция `displayFiles` будет выводить имена и размеры выбранных файлов внутри элемента с id `filesList`, разделяя каждый файл переводом строки.<br>
Похожие вопросы