網站上傳文件文件,添加新附件的例子 – JAVA編程語言程序開發技術文章

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
        <title>Insert title here</title>
  <script type="text/javascript">
   /*
    * 網站上傳文件文件,添加新附件的例子
    */
   onload = function(){
    //獲取添加和刪除需要的元素
    var p = document.getElementById("p");
    var img = document.getElementById("img");
    var btn = document.getElementById("btn");
   
    //添加按鈕的處理事件, 被點擊的時候, 克隆一個p, 插入到btn的前面
    btn.onclick = function(){
       var cloneDiv = p.cloneNode(true); //賦值一個p,加上true瞭.就包括p裡面的元素
     cloneDiv.lastChild.onclick = del;   //// 克隆的節點是不帶事件處理的
     btn.parentNode.insertBefore(cloneDiv,btn); //在btn之前插入p
    }
   
    // 給img添加onclick事件, 被點擊的時候, 刪除其父級節點
    img.onclick = del;
    function del(){
     this.parentNode.parentNode.removeChild(this.parentNode); //使用this的父類的父類來刪除this的父類
    }
   }
  </script>
    </head>
    <body>
     <fieldset style="width:40%; margin-left:30%; text-align:center">
      <legend>上傳文件</legend>
   <p id="p"><input type="file" id="file"><img src="../img/x.gif" width="15px" cursor="pointer" id="img"></p>
   <input type="button" value="添加新附件" id="btn">
     </fieldset>
    </body>
</html>

 

摘自  代俊建的專欄 

發佈留言