Cette partie du formulaire très long, dans laquelle je peux ajouter / supprimer un champ de données en cliquant sur le bouton plus / moins.

Lors de l'ajout d'un nouveau champ de données, je peux sélectionner et télécharger uniquement la première entrée [fichier] .Si j'ai essayé de télécharger le reste des fichiers, sur le fichier sélectionné, le nom de fichier n'est pas remplacé par une étiquette (bouton de téléchargement)

S'il vous plaît quelqu'un peut-il aider à résoudre ce problème

// 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>
1
Pragnesh P 16 avril 2018 à 12:40

4 réponses

Meilleure réponse

J'ai un peu changé votre structure et changé de fonction au changement '.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);
});

Voir le codepen: https://codepen.io/titan_dl_1904/pen/WzVdRN

0
Tan Duong 16 avril 2018 à 14:36

Vous ne pouvez pas avoir plusieurs éléments avec le même id. Vous devez également utiliser toujours this pour référencer l'élément d'entrée dans la fonction de gestionnaire d'événement change.

Edit: ajout de la prise en charge des entrées dynamiques comme demandé dans l'édition de questions.

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
raul.vila 16 avril 2018 à 10:38

Dans votre javascript, vous devez envoyer l'étiquette cliquée:

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

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

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

Et vous devez appeler le clic d'étiquette dans votre élément d'étiquette:

<label onclick="onLabelClick(this);" for="file-upload" class="custom-file-upload form-control mb-2 mr-sm-2 col-sm-5">
0
Coskun Ozogul 16 avril 2018 à 12:58

Dans votre cas, il ne peut sélectionner et afficher que le premier fichier.

$('.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>
0
Pragnesh P 16 avril 2018 à 12:06