思想:
在上传的页面加一个添加的按钮,分别上传
把上传的数据保存到List中
把list放到request中转发到显示页面显示
1.主页
<body>
动态的上传多个文件<br/>
<button onclick="_add();">增加</button>
<form action="<c:url value='UpServlet'/>"method="post" enctype="multipart/form-data">
<table id="tb"border="1" width="400">
<tr>
<td>
<input type="file"name="img"/><br/>
说明<input type="text"name="desc"/>
</td>
<td>
<button onclick="_del(this);">删除</button>
</td>
</tr>
</table>
</form>
<button onclick="_up();">上传</button>
</body>
<script type="text/javascript">
function_add(){
var tb = document.getElementById("tb");
var row = tb.insertRow();
var td = row.insertCell();
td.innerHTML='<input type="file"name="img"/><br/>说明<input type="text"name="desc"/>';
td=row.insertCell();
td.innerHTML='<button οnclick="_del();">删除</button>';
}
function_del(btn){
var tb = document.getElementById("tb");
//获取这个元素所在行的下标
var row = btn.parentNode.parentNode;
//获取这一行的下标
var index = row.rowIndex;
//根据下标删除这一行
tb.deleteRow(index);
}
function_up(){
document.forms[0].submit();
}
</script>
2.UpServlet
package cn.servlet;
public class UpServlet extends HttpServlet {
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException{
request.setCharacterEncoding("UTF-8");
//获取项目的真实的目录
String path = getServletContext().getRealPath("/up");
DiskFileItemFactory disk = new DiskFileItemFactory();//声明临时文件
ServletFileUpload sfu = newServletFileUpload(disk);//声明解析request的核心类
try{
List<FileItem> list = sfu.parseRequest(request);
//声明一个List集合用于保存上传成功以后的数据
List<Map<String, Object>> res = newArrayList<Map<String,Object>>();
Map<String,Object> mm=null;
//上传
for(FileItem file:list){
if(file.isFormField()){
//获取说明
mm.put("desc", file.getString("UTF-8"));
}else{
//先进入else,因为file在前面
mm = new HashMap<String, Object>();
String fileName = file.getName();
fileName=fileName.substring(fileName.lastIndexOf("\\")+1);
mm.put("name",fileName);
mm.put("size", file.getSize());
mm.put("type", file.getContentType());
res.add(mm);
InputStream in = file.getInputStream();
byte[] b = newbyte[1024];
int len = 0;
OutputStream out = new FileOutputStream(path+"/"+fileName);
while((len=in.read(b))!=-1){
out.write(b,0,len);
}
out.close();
in.close();
}
}
//放到request
request.setAttribute("res", res);
//转发
request.getRequestDispatcher("/jsps/show.jsp").forward(request,response);
}catch(Exception e){
e.printStackTrace();
}
}
}
3.显示页
<body>
<img src="<c:url value='/up${fileName}'/>"/><br/>
<c:forEach items="${res}" var="map"varStatus="idx">
${idx.count }<br/>
名:${map.name }<br/>
大小:${map.size }<br/>
类型:${map.type }<br/>
说明:${map.desc }<br/>
</c:forEach>
</body>