bootstrap输入文件上传 - 选择文件，添加新输入[文件]，标签不替换为选定的文件名

时间：2018-04-16 09:40:25

标签： javascript jquery html css

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

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

请任何人都可以帮助解决这个问题

＆＃13;
＆＃13; 
// 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);
});
＆＃13; 
.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

您不能拥有多个具有相同id的元素。此外，你需要使用always 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;">

答案 1 :(得分：0)

我改变了你的结构并改变了'.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

答案 2 :(得分：0)

在您的情况下，它可以选择＆amp;仅显示第一个文件.. 

$('.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>

答案 3 :(得分：0)

在您的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">
相关问题
最新问题