添加额外的文件上传字段

Question

我使用此代码允许用户创建额外的上传字段。正在创建字段，用户可以 select 一个文件，但它永远不会添加到输入字段中。唯一有效的是第一个。在 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 友情提供的代码创建了一个 fiddle，它似乎运行良好。我想我的应用程序可能有冲突。

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

谢谢

Answer 1

您只为字段输入附加更改事件处理程序，而不是为添加的新文件输入附加更改事件处理程序。

请重新购买

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

with -- 这里我们使用 .on 附加更改事件处理程序，选择器将查找 ID 以字段

开头的所有文件输入

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

添加额外的文件上传字段

Add additional file upload fields

javascript

upload

jquery

input

bootstrap-4