js實現文件上傳,刪除效果


效果圖:

   剛開始:

  點擊按鈕“選擇更多后”,可以添加很多選擇文件:

點擊按鈕“刪除”后:

實現代碼:

<!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>

 代碼瑕疵:!!!!在刪除函數中,我選擇的是刪除第一個元素節點,而不是真正意義上的刪除當前按鈕,不知道怎么改善,求改正。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM