可以用webuploader插件，上传成功后，服务端返回图片地址，客户端<img>显示图片
X关闭按钮这个得自己用css样式控制，点击X后，服务端删除图片，然后前端移除该X掉的图片
var arrImgs={"url1","url2","url3",...}图片地址存在数组中var html=''
//遍历数组插入img标签到页面
for(var i=0i<arrImgs.lengthi++){
html+='<img src="'+arrImgs[i]+'" />'//创建img标签，图片地址赋值src
}
document.getElementById("要插入的容器id").innerHtml=html
环境准备
1． 下载并安装Tomcat（已经有很多关于Tomcat安装以及使用的文章，在这里不再介绍）；
2． 下载File upload的jar包commons-fileupload-1.0-beta-1.jar,并将该文件拷贝到{$TOMCAT}/common/lib目录下（其中{$TOMCAT}为Tomcat的安装目录）；
3． 由于Fileupload子项目同时要用到另外一个项目commons-Beanutils，所以必须下载Beanutils，并将解压后的文件commons-beanutils.jar拷贝到{$TOMCAT}/common/lib目录下。
开发文件上传页面
文件上传的界面如图1所示。为了增加效率我们设计了三个文件域，同时上传三个文件。
图1 文件上传界面
页面的HTML代码如下：
<html>
<head>
<title>文件上传演示</title>
</head>
<body bgcolor=“#FFFFFF”text=“#000000” leftmargin=“0”topmargin=“40”marginwidth=“0” marginheight=“0”>
<center>
<h1>文件上传演示</h1>
<form name=“uploadform”method=“POST” action=“save.jsp”ENCTYPE=“multipart/form-data”>
<table border=“1”width=“450”cellpadding=“4” cellspacing=“2”bordercolor=“#9BD7FF”>
<tr><td width=“100%”colspan=“2”>
文件1：<input name=“file1”size=“40”type=“file”>
</td></tr>
<tr><td width=“100%”colspan=“2”>
文件2：<input name=“file2”size=“40”type=“file”>
</td></tr>
<tr><td width=“100%”colspan=“2”>
文件3：<input name=“file3”size=“40”type=“file”>
</td></tr>
</table>
<br/><br/>
<table>
<tr><td align=“center”><input name=“upload” type=“submit”value=“开始上传”/></td></tr>
</table>
</form>
</center>
</body>
</html>
代码中要特别注意的是黑体处。必须保证表单的ENCTYPE属性值为multipart/form-data，这样浏览器才能正确执行上传文件的操作。
处理上传文件信息
由于本文主要是讲述如何使用Commons-fileupload，所以为了便于修改、调试，上传文件的保存使用一个JSP文件来进行处理。我们将浏览器上传来的所有文件保存在一个指定目录下并在页面上显示所有上传文件的详细信息。保存页面处理结果见图2所示。
图2 保存页面
下面来看看save.jsp的代码:
<%
/**
* 演示文件上传的处理
* @author <a href=“mailto:[email protected]”>Winter Lau</a>
* @version $Id: save.jsp,v 1.00 2003/03/01 10:10:15
*/
%>
<%@ page language=“java”contentType=“text/htmlcharset=GBK”%>
<%@ page import=“java.util.*”%>
<%@ page import=“org.apache.commons.fileupload.*”%>
<html>
<head>
<title>保存上传文件</title>
</head>
<%
String msg = “”
FileUpload fu = new FileUpload()
// 设置允许用户上传文件大小,单位:字节
fu.setSizeMax(10000000)
// maximum size that will be stored in memory?
// 设置最多只允许在内存中存储的数据,单位:字节
fu.setSizeThreshold(4096)
// 设置一旦文件大小超过getSizeThreshold()的值时数据存放在硬盘的目录
fu.setRepositoryPath(“C:\\TEMP”)
//开始读取上传信息
List fileItems = fu.parseRequest(request)
%>
<body bgcolor=“#FFFFFF”text=“#000000” leftmargin=“0”topmargin=“40”marginwidth=“0” marginheight=“0”>
<font size=“6”color=“blue”>文件列表：</font>
<center>
<table cellpadding=0 cellspacing=1 border=1 width=“100%”>
<tr>
<td bgcolor=“#008080”>文件名</td>
<td bgcolor=“#008080”>大小</td>
</tr>
<%
// 依次处理每个上传的文件
Iterator iter = fileItems.iterator()
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next()
//忽略其他不是文件域的所有表单信息
if (!item.isFormField()) {
String name = item.getName()
long size = item.getSize()
if((name==null||name.equals(“”)) &&size==0)
continue
%>
<tr>
<td><%=item.getName()%></td>
<td><%=item.getSize()%></td>
</tr>
<%
//保存上传的文件到指定的目录
name = name.replace(‘:’,‘_’)
name = name.replace(‘\\’,‘_’)
item.write(“F:\\”+ name)
}
}
%>
</table>
<br/><br/>
<a href=“upload.html”>返回上传页面</a>
</center>
</body>
</html>
在这个文件中需要注意的是FileUpload对象的一些参数值的意义，如下面代码所示的三个参数sizeMax、sizeThreshold、repositoryPath：
FileUpload fu = new FileUpload()
// 设置允许用户上传文件大小,单位:字节
fu.setSizeMax(10000000)
// maximum size that will be stored in memory?
// 设置最多只允许在内存中存储的数据,单位:字节
fu.setSizeThreshold(4096)
// 设置一旦文件大小超过getSizeThreshold()的值时数据存放在硬盘的目录
fu.setRepositoryPath(“C:\\TEMP”)
这3个参数的意义分别为：
SizeMax 用来设置上传文件大小的最大值，一旦用户上传的文件大小超过该值时将会抛出一个FileUploadException异常，提示文件太大；
SizeThreshold 设置内存中缓冲区的大小，一旦文件的大小超过该值的时候，程序会自动将其它数据存放在repositoryPath指定的目录下作为缓冲。合理设置该参数的值可以保证服务器稳定高效的运行；
RepositoryPath 指定缓冲区目录。
使用注意事项
从实际应用的结果来看该模块能够稳定高效的工作。其中参数SizeThreshold的值至关重要，设置太大会占用过多的内存，设置太小会频繁使用硬盘作为缓冲以致牺牲性能。因此，设置该值时要根据用户上传文件大小分布情况来设定。例如大部分文件大小集中在100KB左右，则可以使用100KB作为该参数的值，当然了再大就不合适了。使用commons-fileupload来处理HTTP文件上传的功能模块很小，但是值得研究的东西很多。
