Добавить дополнительные поля загрузки файлов - PullRequest
Новая
       11

Добавить дополнительные поля загрузки файлов

0 голосов
/ 19 сентября 2019

Я использую этот код, чтобы позволить пользователю создавать дополнительные поля загрузки.Поля создаются, и пользователь может выбрать файл, но он никогда не добавляется в поле ввода.Единственное, что работает, это первое.В firebug я заметил, что для создаваемых дополнительных полей нет прослушивателя событий. 

<script>
$(document).ready(function () {
    var next = 1;
    $(".add-more").click(function (e) {
        e.preventDefault();
        var addto = "#field" + next;
        next = next + 1;
        var newIn = '<div id="field' + next + '" class="custom-file mt-3 mb-2"><label class="custom-file-label">NewFile ' + next + '</label><input class="custom-file-input" name="field' + next + '" type="file"><input type = "text" class="form-control mt-1 mb-1" name="field' + next + '" placeholder="Text" /></div>';
        var newInput = $(newIn);
        $(addto).after(newInput);
        $("#field" + next).attr('data-source', $(addto).attr('data-source'));
        $("#count").val(next);
    });

});

Это HTML-код для входного файла, который уже существует, и для нового пут, который являетсягенерируется, когда пользователь нажимает на кнопку для добавления новых файлов: 

<div id="fields">
<div id="field1" class="custom-file mt-1 mb-3">
<input class="custom-file-input" id="field-1" name="field-1" type="file">
<label class="custom-file-label">New File 1</label>
<input type="text" class="form-control mt-1 mb-1" placeholder="New File">
</div>

<div id="field2" class="custom-file mt-3 mb-2">
<label class="custom-file-label">New File 2</label>
<input class="custom-file-input" name="field2" type="file">
<input type="text" class="form-control mt-1 mb-1" name="field2" placeholder="Please provide a brief description of the uploaded file">
</div>

<button id="b1" class="btn btn-success add-more mt-4" type="button">Add more files</button>
</div>

Просто заметка;Я использую Bootstrap 4.

Кто-нибудь знает причину этого?

РЕДАКТИРОВАТЬ: Я только что добавил этот код, и когда я пытаюсь загрузить с использованием динамически созданных входов, предупреждение «undefined '

$("#fields").delegate("input[type=file]", "change", function () {
        alert($(this).attr("id"));
    });

Я создал скрипку, используя код, любезно предоставленный Bhushan, и он, кажется, работает просто отлично.Я думаю, что у меня может быть конфликт в моей заявке.

http://jsfiddle.net/kogcyc/x1hphsvb/

Спасибо

1 Ответ

0 голосов
/ 19 сентября 2019

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

пожалуйста, отмените 

$("#fields").delegate("input[type=file]", "change", function () {
        alert($(this).attr("id"));
    });

с - здесь мы присоединяем обработчик события изменения, используя.on и селектор будет искать все вводимые файлы, имеющие идентификатор, начинающийся с полей 

$(document).on("change","input[id^=field][type=file]",  function () {
        alert($(this).attr("id"));
    });
...