javascript - 引导输入文件上传-选择文件，添加新输入[文件]，标签不替换为所选文件名

Question

这是非常长的表单的一部分，我可以通过单击加号/减号按钮在其中添加/删除数据字段。

在添加新数据字段时，我只能选择并上传第一个输入[文件]。如果我尝试上传其余文件，在选择文件时，文件名不会被标签(上传按钮)替换

请问谁能帮忙解决这个问题

// Dynamically add-on fields

$(function() {
    // Remove button click
    $(document).on(
        'click',
        '[data-role="dynamic-fields"] > .form-inline [data-role="remove"]',
        function(e) {
            e.preventDefault();
            $(this).closest('.form-inline').remove();
        }
    );
    // Add button click
    $(document).on(
        'click',
        '[data-role="dynamic-fields"] > .form-inline [data-role="add"]',
        function(e) {
            e.preventDefault();
            var container = $(this).closest('[data-role="dynamic-fields"]');
            new_field_group = container.children().filter('.form-inline:first-child').clone();
            new_field_group.find('input').each(function(){
                $(this).val('');
            });
            container.append(new_field_group);
        }
    );
});



// file upload

$('#file-upload').change(function() {
  var i = $(this).prev('label').clone();
  var file = $('#file-upload')[0].files[0].name;
  $(this).prev('label').text(file);
});

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>



 <div class="form-group row custom-upload">

 	<div class="col-md-6">
 		 <label class="col-form-label" for="pancardupload">Lorem Ipsum is simply dummy text</label>
 	</div>
   
    <div class="col-md-6">
	    <div data-role="dynamic-fields">
            <div class="form-inline form-row">
			
				<input input type="text" class="form-control mb-2 mr-sm-2 col-sm-4" id="field-name" placeholder="Enter Amount">               
				                    
				<!-- file upload start-->
				<label for="file-upload" class="custom-file-upload form-control mb-2 mr-sm-2 col-sm-5">
				<i class="fa fa-cloud-upload"></i> Upload Document
				</label>
				<input id="file-upload" name="file_name" type="file" style="display:none;">
				 <!-- file upload ends-->                
				                    
				<button class="btn btn-sm btn-danger  mb-2" data-role="remove">
				 <i class="fa fa-minus"></i>
				</button>
				<button class="btn btn-sm btn-primary  mb-2" data-role="add">
				    <i class="fa fa-plus"></i>
				</button>
                
                
            </div>  <!-- /div.form-inline -->
        </div>  <!-- /div[data-role="dynamic-fields"] --> 	
    </div>
 </div>

Answer 1

不能有多个具有相同 id 的元素。此外，您还需要始终使用 this 来引用更改事件处理函数中的输入元素。

编辑:根据问题版本中的要求添加了对动态输入的支持。

var uploads = $('.file-upload');
var currentUploadCount = uploads.length;
uploads.change(setLabel);

function setLabel() {
  var i = $(this).prev('label').clone();
  var file = this.files[0].name;
  $(this).prev('label').text(file);
}

$('#addUpload').click(function() {
  currentUploadCount++;
  $(document.body).append("<br/>");
  $(document.body).append("<br/>");
  var newId = 'file-upload-' + currentUploadCount;
  var newLabel = $('<label>Upload Document</label>')
    .attr('for', newId)
    .addClass('custom-file-upload form-control mb-2 mr-sm-2 col-sm-5');
  newLabel.append($('i').addClass('fa fa-cloud-upload'))
  $(document.body).append(newLabel);

  var newInput = $('<input>')
    .addClass('file-upload')
    .attr('id', newId)
    .attr('type', 'file')
    .change(setLabel)
    .hide();

  $(document.body).append(newInput);
})

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button id="addUpload">
Add new upload
</button>
<br/><br/>
<label for="file-upload-1" class="custom-file-upload form-control mb-2 mr-sm-2 col-sm-5">
    <i class="fa fa-cloud-upload"></i>
    Upload Document
</label>
<input id="file-upload-1" class="file-upload" name="file_name" type="file" style="display:none;">

<br><br>

<label for="file-upload-2" class="custom-file-upload form-control mb-2 mr-sm-2 col-sm-5">
    <i class="fa fa-cloud-upload"></i>
    Upload Document
</label>
<input id="file-upload-2" class="file-upload" name="file_name" type="file" style="display:none;">

<br><br>

<label for="file-upload-3" class="custom-file-upload form-control mb-2 mr-sm-2 col-sm-5">
    <i class="fa fa-cloud-upload"></i>
    Upload Document
</label>
<input id="file-upload-3" class="file-upload" name="file_name" type="file" style="display:none;">