Блог

Главная - Вопросы по программированию - как назначить массив файлов полей ввода для saparate полей ввода

как назначить массив файлов полей ввода для saparate полей ввода

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть форма, в которой у меня есть поле ввода файла, где я могу выбрать несколько файлов. Теперь проблема в том, что если я выберу 3 файла, то он должен создать 3 поля ввода с файлами от 1 до 3. Например, можно увидеть ниже.

введите описание изображения здесь

Я хочу сделать это с помощью jquery. Код, который я написал, является

 <!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 
</head>
<body>
    <form name="form" class="form-group" method="post" action="" enctype="multipart/form-data">
    <input type="file" id="track" name="tracks" multiple>
    <button type="button" id="btn-submit"> Upload</button>

    <script>
        $(document).on("click", "#btn-submit", function() {
            
        });
    </script>
</body>
</html>

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

Любая помощь приветствуется.

Комментарии:

1. Вы не написали никакого кода для этой конкретной проблемы, поэтому вы не можете притворяться, что кто-то сделает эту работу за вас. Вы можете переформулировать свой вопрос, чтобы задать что-то вроде «Какой метод я мог бы использовать для решения этой проблемы?» Я хотел бы спросить вас: «Вы должны использовать DOM, с помощью которого вы можете создавать HTML-объекты», но я сомневаюсь, что вы сможете это сделать, потому что предварительный выбор файлов в поле ввода является проблемой безопасности. Таким образом, лучшим подходом было бы ограничить загрузку одним файлом и создать новый ввод, когда файл был выбран в существующем, предоставляя пользователю возможность выбрать новый файл.

2. Вы правы, Карлес, я хочу создавать html-объекты, но я работал только с текстовым полем и понятия не имел о файлах. Пожалуйста, предложите, как я могу выйти из этого.

3. Прежде всего, я бы установил событие «onchange», а не «click», а затем я бы использовал createElement для создания дополнительных полей ввода ( w3schools.com/jsref/met_document_createelement.asp ). Поскольку вам также нужно будет присоединить событие к новому элементу с помощью myelement.onchange = thefunction , тогда я бы написал отдельную функцию для этого действия, вместо объявления встроенной функции. Тогда я бы подсчитал общее количество полей ввода и количество полей ввода, которые были фактически установлены, чтобы избежать создания новых.

Метки: