效果圖:
剛開始:
點擊按鈕“選擇更多后”,可以添加很多選擇文件:
點擊按鈕“刪除”后:
實現代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>選擇文件</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
div{
margin:10px;
}
</style>
<script>
//當點擊添加更多時,增加一個DIV
//先增加兩個input
function addFile(){
var fragment=document.createDocumentFragment();
var divNode=document.getElementById("container");
var newDiv=document.createElement("div");
newDiv.setAttribute("id","file");
fragment.appendChild(newDiv);
var newInput=document.createElement("input");
newInput.setAttribute("type","file");
newInput.setAttribute("name","選擇文件");
newDiv.appendChild(newInput);
var newInput=document.createElement("input");
newInput.setAttribute("type","button");
newInput.setAttribute("value","刪除");
newInput.setAttribute("onclick","delFile()");
newInput.setAttribute("id","1");
newDiv.appendChild(newInput);
divNode.appendChild(fragment);
}
function delFile(){
var divNode=document.getElementById("container");
divNode.removeChild(divNode.firstElementChild);
}
</script>
</head>
<body>
<input type="button" value="選擇更多" onclick="addFile()"/>
<div id="container">
<div id="file">
<input type="file" name="選擇文件"/>
<input type="button" value="刪除" onclick="delFile()" />
</div>
</div>
</body>
</html>
代碼瑕疵:!!!!在刪除函數中,我選擇的是刪除第一個元素節點,而不是真正意義上的刪除當前按鈕,不知道怎么改善,求改正。