使用js编程添加输入文件标签

Question

我想使用js将输入（类型文件）字段添加到我的html中。我已经完成了，但问题是当用户选择一个文件，然后单击“新文件”按钮来选择另一个文件，prevoius选择文件消失，并说没有选择文件。问题是什么？

function newfile(){ 
 
    var divv=document.getElementById("files"); 
 
    var name="files"+divv.childNodes.length; 
 
    divv.innerHTML+='<div><input id="'+name+'" name="'+name+'" type="file" accept="*" class="col-lg-11 col-md-10 col-sm-10 col-sx-6"></div>'; 
 
}

<div class="col-sm-10"> 
 
<div id="files"></div> 
 
<a class="btn btn-primary col-sx-12" onclick="newfile()">New file</a> 
 
</div>

Answer 1

这是因为每次你使用divv.innerHTML+='<div><input id="'+name+'" name="'+name+'" type="file" accept="*" class="col-lg-11 col-md-10 col-sm-10 col-sx-6"></div>'在divv所有内容都替换为新的内容和以前的信息丢失。 你可以在这里使用appendChild()，像这样：

function newfile(){ 
 
var divv=document.getElementById("files"); 
 
var name="files"+divv.childNodes.length; 
 
var inputNode = document.createElement("input"); 
 
inputNode.id = name; 
 
inputNode.name = name; 
 
inputNode.type = 'file'; 
 
divv.appendChild(inputNode); 
 
}

<div class="col-sm-10"> 
 
<div id="files"></div> 
 
<a class="btn btn-primary col-sx-12" onclick="newfile()">New file</a> 
 
</div>