使用DOM方法实现多附件上传客户端
生活随笔
收集整理的這篇文章主要介紹了
使用DOM方法实现多附件上传客户端
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
有時候需要傳多個附件，再次我用javascript的dom方式實現了次功能，很實用的。
功能呢就是用戶可以添加多個附件，每次點擊 添加 添加一個新的上傳文本域，對于已經添加的上傳文本域，用戶可以 點擊“刪除” 刪除一個上傳文本域
程序思路我就不在這廢話了，下邊給大家在程序中添上了很詳細的偽代碼。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用DOM方法實現多附件上傳客戶端</title>
<script language="javascript" type="text/javascript">
function addFile(){
//創建tr標簽
var tr1=document.createElement("tr");
//創建td標簽
var td1=document.createElement("td");
//創建input標簽
var input1=document.createElement("input");
//給input加上type=file屬性
input1.setAttribute("type","file");
//給input加上value=“瀏覽”屬性
input1.setAttribute("value","瀏覽");
//將創建的第一個td追加到tr1
td1.appendChild(input1);
tr1.appendChild(td1);
//再次創建一個td
var td1=document.createElement("td");
//創建input標簽
var input1=document.createElement("input");
//給input加上type=“button” 和value=“刪除”屬性
input1.setAttribute("type","button");
input1.setAttribute("value","刪除");
//給input添加上nclick事件，將this傳過去，也就是標簽對象input，到時候執行那個input就將那個input對象傳過去
input1.setAttribute("onclick","delFile(this)");
//將input追加給td
td1.appendChild(input1);
//再講td追加給tr1
tr1.appendChild(td1);
//最后將tr1追加給table
document.getElementById("id2").appendChild(tr1);
}
?? ?
?? ?
?? ?
function delFile(this1){
?? ?//this1接受onclik事件傳過來的值，也就是被執行的那個input對象
?? ?//我們要刪除的是tr標簽，所以經過input標簽找到input的父標記td
?? ?//再經過td找到td的父標記tr，在找到tr的父標記table，根據關系就是input的大爺table~
??? var p=this1.parentNode;
?? ? var p2=p.parentNode;
?? ? var p3=p2.parentNode;
?? ?//刪除執行刪除標簽所屬的tr標簽，保存刪除標簽的結果
?? ?var element=p3.removeChild(p2);
?? ?}
</script>
</head>
<body>
<div id="id1">
<table id="id2">
<tr>
<td><input type="file" value="瀏覽"></td>
<td><input type="button" value="添加" οnclick="addFile()"></td>
</tr>
</table>
</div>
</body>
</html>
總結
以上是生活随笔為你收集整理的使用DOM方法实现多附件上传客户端的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： XenApp 6.0/6.5服务优化
- 下一篇： 中国经济存在大问题