文件上傳的動態添加輸入項

 

文件上傳的動態添加輸入項:

新建upload1.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

   

    <title>文件上傳頁面</title>

   

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">   

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

    <!--

    <link rel="stylesheet" type="text/css" href="styles.css">

    -->

<script type="text/javascript">

function addfile(){

    var files=document.getElementById("files");

    <!--動態添加元素-->

    var input=document.createElement("input");

    input.name="file";

    input.type="file";

   

    var delButton=document.createElement("input");

    delButton.type="button";

    delButton.value="刪除";

    delButton.οnclick=function del(){

       <!--先刪除父節點-->

       this.parentNode.parentNode.removeChild(this.parentNode);

      

    }

   

    var div=document.createElement("div");

    div.appendChild(input);<!--添加文件上傳的輸入項-->

    div.appendChild(delButton);<!--添加刪除按鈕-->

   

    <!--把div塊添加到files div塊中-->

    files.appendChild(div);

   

}

</script>

  </head>

 

  <body>

     <form action="${pageContext.request.contextPath}/servlet/UploadServlet" method="post" enctype="multipart/form-data">

  <table border="1" width="40%"

    <tr> 

   <td>上傳用戶:</td><td><input type="text" name="user"></td>

  

   </tr>   

  

   <tr>

   <td></td>

   <td><input type="button" value="添加文件" onClick="addfile()"/></td>

   </tr>

  

   <tr>

   <td></td>

   <td><div id="files"></div></td>

   </tr>

  

   <tr>

   <td></td>

   <td>

        <input type="submit" value="上傳文件"/>

    </td>

    </tr>

    </table>

    </form>

  </body>

</html>

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章