当我想创建多个输入类型 = 'file' 时选择文件时出现问题答案

【问题标题】：Problem selecting file when I want to create multiple input type = 'file'当我想创建多个输入类型 = 'file' 时选择文件时出现问题
【发布时间】：2021-02-12 16:54:02
【问题描述】：

我想为一个项目创建多个图像。我遇到的问题是，当我点击 Add 按钮时，会创建 input type = 'file' 标签，但是当我点击 创建的标签，它不起作用，只有最初可用的第一个选项起作用。

在 HTML 中

<button type="button" id="bAddImage"> Add </button>
<div class="m-t-15" id="row-file">
<div class="row-file-upload">
    <div class="col-lg-6 col-md-6 m-t-10 row clearfix">
        <button class="material-icons text-center bClear waves-effect bg-blue-grey">clear</button>
        <div class="file-upload">
            <div class="file-select">
                <div class="file-select-name fileName">Choos File</div>
                <div class="file-select-button">... Choose File</div>
                <input type="file" class="chooseFile">
            </div>
        </div>
    </div>
</div>

在脚本中

<script type="text/javascript">

    $(document).ready(function () {

        $('body').on('click',
            '.bClear',
            function (event) {
                event.preventDefault();

                var $el = $('.chooseFile');
                $el.wrap('<form>').closest('form').get(0).reset();
                $el.unwrap();
                $('.chooseFile').trigger('change');
            });

        $('body').on('change', '.chooseFile', function () {
            var filename = $(".chooseFile").val();
            if (/^\s*$/.test(filename)) {
                $(".file-upload").removeClass('active');
                $(".fileName").text("فایل انتخاب نشده");
            }
            else {
                $(".file-upload").addClass('active');
                filename = filename.replace("C:\\fakepath\\", "");
                if (filename.length > 30) {
                    filename = filename.substring(0, 30) + '...';
                }
                $(".fileName").text(filename);
            }
        });

        $('body').on('click', '#bAddImage', function () {
            $('#row-file').append($('.row-file-upload').html());
        });

        
    });

</script>

【问题讨论】：

HTML 代码中的添加按钮在哪里？请给我更多信息！

标签： javascript html jquery input file-upload

【解决方案1】：

这是一个将文件输入动态添加到 HTML 的简单示例。

$(document).ready(function() {
  var wrapper = $(".wrapper");
  var add_button = $(".Add");
  var uploadField = document.getElementById("file");
  $(add_button).click(function(e) {
   e.preventDefault();
   $(wrapper).append('<div><input type="file" name="att"/><a href="#"class="remove">Remove</a></div>');})
   $(wrapper).on("click", ".remove", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <a href="#" class="Add">+ Add</a>
  <div>
    <input type="file" id="file" name="att">
  </div>
</div>

【讨论】：