Исправьте код JQuery, чтобы добавить новый входной файл правильно

Question

• пункт Список

У меня есть случай, когда использование glyphicon: «+» нажатие кнопки будет добавлять новый ввод HTML: файл типа, но при этом так после двух записей вместо создания одной новой файловой_идентификации создается несколько.

var firstFileInputClone; 
 

 
$(document).ready(function() { 
 
    firstFileInputClone = $(".file-div").last().clone(); 
 
}); 
 

 
function addNewFileInput(){ 
 

 
    var newFileElement = firstFileInputClone; \t 
 
    var index = $(".file-div").length; \t 
 

 
    $(newFileElement).find("input:first").attr("name","file_" + index); 
 
    $(newFileElement).insertAfter($(".file-div")); 
 
    return true; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="file-div row top10"> 
 

 
    <label class="col-md-4 control-label">Upload Attachment</label> 
 
    <div class="col-md-6 inputGroupContainer"> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> \t \t \t \t \t 
 
     <input type="file" name="file_0" class="form-control file-input" /> 
 
     <span class="input-group-addon"><i class="glyphicon glyphicon-plus" onclick="addNewFileInput()"></i></span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Try This One.

function addNewFileInput(){ 
 

 
\t var firstFileInputClone = ''; 
 
\t var index = $(".file-input").length; \t 
 
\t 
 
\t firstFileInputClone += '<label class="col-md-4 control-label">Upload Attachment</label>'; 
 
\t firstFileInputClone += '<div class="col-md-6 inputGroupContainer">'; 
 
\t firstFileInputClone += '<div class="input-group">'; 
 
\t firstFileInputClone += '<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>'; \t 
 
\t firstFileInputClone += ' <input type="file" name="file_'+index+'" class="form-control file-input" />'; 
 
\t firstFileInputClone += ' <span class="input-group-addon"><i class="glyphicon glyphicon-plus" onclick="addNewFileInput()" ></i></span>'; 
 
\t firstFileInputClone += '</div>'; 
 
\t firstFileInputClone += '</div>'; 
 
\t 
 
\t $('.file-div').append(firstFileInputClone); 
 
\t return true; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="file-div row top10"> 
 

 
    <label class="col-md-4 control-label">Upload Attachment</label> 
 
    <div class="col-md-6 inputGroupContainer"> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span> \t \t \t \t \t 
 
     <input type="file" name="file_0" class="form-control file-input" /> 
 
     <span class="input-group-addon"><i class="glyphicon glyphicon-plus" onclick="addNewFileInput()"></i></span> 
 
    </div> 
 
    </div> 
 
</div>