Как написать скрипт на JavaScript для одновременной загрузки нескольких файлов с дополнительными полями ввода для каждого файла?

Question

Владимир

javascript

Как написать скрипт на JavaScript для одновременной загрузки нескольких файлов с дополнительными полями ввода для каждого файла?

Как написать JavaScript-скрипт, который позволит выбирать несколько файлов для загрузки, а также загружать файлы через перетаскивание? Как добавить функционал для отображения 3-4 текстовых полей ввода для каждого файла после их выбора или перетаскивания? Как настроить отображение progress bar'а для отслеживания передачи файлов на сервер после нажатия кнопки "Отправить"?

8 июля 2024 г. 8:22

Ответы на вопрос 1

Похожие вопросы

Answer 1

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Загрузка файлов</title>
</head>
<body>
    <input type="file" id="file-input" multiple>
    <div id="file-inputs"></div>
    <button id="upload-btn">Отправить</button>
    <div id="progress-bar"></div>

    <script>
        const fileInput = document.getElementById('file-input');
        const fileInputsDiv = document.getElementById('file-inputs');
        const uploadBtn = document.getElementById('upload-btn');
        const progressBar = document.getElementById('progress-bar');

        fileInput.addEventListener('change', () => {
            const files = Array.from(fileInput.files);

            fileInputsDiv.innerHTML = '';

            files.forEach((file, index) => {
                const input = document.createElement('input');
                input.type = 'text';
                input.placeholder = `Дополнительное поле ${index + 1}`;
                fileInputsDiv.appendChild(input);
            });
        });

        uploadBtn.addEventListener('click', () => {
            const files = Array.from(fileInput.files);
            const inputs = Array.from(fileInputsDiv.querySelectorAll('input'));

            const formData = new FormData();

            files.forEach((file, index) => {
                formData.append(`file_${index}`, file);
            });

            inputs.forEach((input, index) => {
                formData.append(`field_${index}`, input.value);
            });

            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload', true);

            xhr.upload.onprogress = (e) => {
                if (e.lengthComputable) {
                    const percentComplete = (e.loaded / e.total) * 100;
                    progressBar.style.width = percentComplete + '%';
                }
            };

            xhr.onload = () => {
                if (xhr.status >= 200 && xhr.status < 300) {
                    // Обработка успешной загрузки
                } else {
                    // Обработка ошибки загрузки
                }
            };

            xhr.send(formData);
        });
    </script>
</body>
</html>
```

Этот скрипт позволяет выбирать несколько файлов для загрузки, добавлять дополнительные текстовые поля для каждого файла и отслеживать прогресс загрузки с помощью progress bar'а. После нажатия кнопки "Отправить", скрипт отправляет файлы на сервер с указанными дополнительными полями. Пожалуйста, замените `'/upload'` на URL вашего сервера для обработки загрузки файлов.