使用JavaScript添加和删除文件上传附件-优快云博客

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
插入目标元素的位置
   elt.insertBefore(newNode, oldNode);           添加到elt中，child之前。
   注意： elt必须是oldNode的直接父节点。

   elt.removeChild(child)                   删除指定的子节点

   注意： elt必须是child的直接父节点。

*/


   function addFile(){
       //先要创建一个tr对象
       var trNode = document.createElement("tr");
       //创建td对象
       var tdNode1 = document.createElement("td");
       var tdNode2 = document.createElement("td");
       //
       tdNode1.innerHTML ="<input type='file'/>";
       tdNode2.innerHTML = "<a href='#' οnclick='delFile(this)' >删除附件</a>";
       //把td的节点添加到tr节点上
       trNode.appendChild(tdNode1);
       trNode.appendChild(tdNode2);

       var tbodyNode = document.getElementsByTagName("tbody")[0];
       var lastRow = document.getElementById("lastRow");

       tbodyNode.insertBefore(trNode,lastRow);
   }


   //删除附件
   function delFile(aNode){
       var trNode = aNode.parentNode.parentNode;
       var tbodyNode = document.getElementsByTagName("tbody")[0];
       tbodyNode.removeChild(trNode);
   }


</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
   <table>
       <tr>
           <td><input type="file"/></td><td><a href="#" οnclick="delFile(this)" >删除附件</a></td>
       </tr>

        <tr id="lastRow">
           <td colspan="2"><input οnclick="addFile()" type="button" value="添加附件"/></td>
        </tr>
    </table>
</body>
</html>