您的位置：首页 > Web前端 > JavaScript

多附件上传之动态添加input标签

2016-02-29 11:42 525 查看

<html>
<meta charset="utf-8">
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<td width="50%">附件列表</td>
<td >附件操作栏</td>
</thead>
<tbody>
<tr>
<td id="inputFile">
<p id="index_1"><input type="file" name="files"></input><button type="button" onclick="delFile('inputFile',this.parentNode.id);">删除</button></p>
</td>
<td>
<button type="button" onclick="addFile();">增加</button>
<button type="submit" >上传</button>
</td>
</tr>

</tbody>
</table>
</html>
<script type="text/javascript">

function delFile(obj, index){
var inputFileId = document.getElementById(obj);
var inputFileByIndex = document.getElementById(index);
inputFileId.removeChild(inputFileByIndex);
}
function addFile(){
var fileName = "inputFile";
var inputFileId = document.getElementById(fileName);
var index = 1;
if(null == inputFileId.lastChild || inputFileId.lastChild.id == undefined ){
index = 1;
}else{
index = parseInt(inputFileId.lastChild.id.substring(6))+1;
}

var p = document.createElement("p");
p.id="index_"+index;
var input = document.createElement("input");
input.type="file";
input.name="files";
var button = document.createElement("button");
button.type="button";button.innerHTML="删除";button.onclick=function(){delFile(fileName, p.id);};
p.appendChild(input);
p.appendChild(button);

inputFileId.appendChild(p);
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JS input file

相关文章推荐

新的分享

章节导航