|
多个文件上传的javascript编码 一．技巧： 每次动态增加一个文件上传输入框，都把它和删除按纽放置在一个单独的div中，并对删除按纽的onclick事件进行响应，使之删除删除按纽所在的div。
<%@ 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//DTDHTML 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(){ //获取到指定id的元素对象 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.onclick=function del(){ //得到他的父节点（div）的父节点（div id="files"）删除自己的div this.parentNode.parentNode.removeChild(this.parentNode); }
//添加div，input ，delButton var div = document.createElement("div"); div.appendChild(input); div.appendChild(delButton);
files.appendChild(div); }
</script> </head>
<body> <form action="${pageContext.request.contextPath}/servlet/UploadServlet" method="post" enctype="multipart/form-data"accept-charset="utf-8"> 上传人<input type="text" name="User"><br> 上传文件<input type="file" name="file1"><br> 上传文件<input type="file" name="file2"><br> <input type="submit"value="上传文件">
</form> <form action="${pageContext.request.contextPath}/servlet/UploadServlet2" method="post" enctype="multipart/form-data"> 上传人<input type="text" name="User"><br> 上传文件<input type="file" name="file1"><br> 上传文件<input type="file" name="file2"><br> <input type="submit"value="上传文件">
</form> <form action="${pageContext.request.contextPath}/servlet/UploadServlet3" method="post" enctype="multipart/form-data"> <table> <tr> <td> 用户名： </td> <td> <input type="text"name="username" > </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> |
|
|
