我想使用 js 将输入(类型文件)字段添加到我的 html 中。我已经完成了,但问题是当用户选择一个文件然后单击“新文件”按钮选择另一个文件时,先前选择的文件消失并显示未选择文件。有什么问题吗?
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>
最佳答案
发生这种情况是因为每次您使用 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>
关于javascript - 使用js以编程方式添加输入文件标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45475082/