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

【问题标题】：bootstrap input file upload- on select file, add on new input[file], label is not replaced with selected file name引导输入文件上传-选择文件，添加新输入[文件]，标签不替换为所选文件名
【发布时间】：2018-09-26 00:08:16
【问题描述】：

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

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

谁能帮忙解决这个问题

// 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>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我改变了一点你的结构和改变功能'.file-input'

<input input type="text" class="form-control mb-2 mr-sm-2 col-sm-4" id="field-name" placeholder="Enter Amount">               
                <!-- file upload start-->
        <div class="mb-2 mr-sm-2 col-sm-5 wrap-input-container">
          <label class="custom-file-upload form-control">
          <i class="fa fa-cloud-upload"></i> Upload Document
          </label>
          <input class="file-upload" name="file_name" type="file">
       </div>

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

查看codepen：https://codepen.io/titan_dl_1904/pen/WzVdRN

【讨论】：

感谢您的帮助。但我遇到了我在下面 sn-p 中提到的问题...请您帮忙解决？ – 伺服刚刚编辑
很高兴帮助你:)

【解决方案2】：

在您的 javascript 中，您应该发送点击的标签：

 var lastLabel ;
function onLabelClick(sender){
lastLabel = $(sender);
}
// file upload
$('#file-upload').change(function() {

  var file = $('#file-upload')[0].files[0].name;

  $(lastLabel).text(file);
});

你应该在你的标签元素中调用标签点击：

<label onclick="onLabelClick(this);" for="file-upload" class="custom-file-upload form-control mb-2 mr-sm-2 col-sm-5">

【讨论】：

【解决方案3】：

在您的情况下，它只能选择和显示第一个文件..

$('.file-upload').change(function() {
  var i = $(this).prev('label').clone();
  var file = this.files[0].name;
  console.log(this.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;
}
.wrap-input-container {
  position: relative;
  overflow: hidden;
  height: 32px;
}
.wrap-input-container input {
position: absolute;
font-size: 400px;
opacity: 0;
z-index: 1;
top: 0;
left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrap-input-container">
  <label 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 class="file-upload" name="file_name" type="file">
</div>
<br><br>
<div class="wrap-input-container">
  <label 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 class="file-upload" name="file_name" type="file">
</div>
<br><br>
<div class="wrap-input-container">
  <label 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 class="file-upload" name="file_name" type="file">
</div>

// 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 = this.files[0].name;
  //console.log(this.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;
}
.wrap-input-container {
  position: relative;
  overflow: hidden;
}
.wrap-input-container input {
position: absolute;
font-size: 400px;
opacity: 0;
z-index: 1;
top: 0;
left: 0;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.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="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-->
				<div class="wrap-input-container col-sm-5">
				  <label class="custom-file-upload form-control mb-2 mr-sm-2 ">
				      <i class="fa fa-cloud-upload"></i>
				      Upload Document
				  </label>
				  <input class="file-upload" name="file_name[]" type="file">
				</div>
				 <!-- 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>

【讨论】：

@TanDuong 这里的具体问题仅在于“上传文档”..当我添加新字段并选择新文件后，它的名称不会显示在上传按钮上，就像它显示的一样第一个。
我更新了codepen new_field_group.find('label').html('Upload Document');

【解决方案4】：

您不能有多个具有相同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;">

【讨论】：

感谢 Coskun，我在输入 ID 上有错字。固定！
是的，感谢您的回答，但在我的情况下，动态添加和删除表单字段，例如，用户想要上传更多文件，然后他必须单击添加按钮。
抱歉 rahul 请您帮忙，因为我刚刚编辑了上面的评论？？
我编辑了答案，但我认为您更改了原始问题的范围。
@Servo 现在您可以添加新的上传按钮