文件上传的动态添加输入项源代码

 

文件上传的动态添加输入项:

新建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>

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值