使用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>