电子相册系统（五）添加图片

1. 功能说明

在添加图片之前，我们需要弹出个带有蒙板的提示框，样式如下。当然我们上传图片的名字不能重复，图片还要放在服务器的指定文件夹下。上传成功之后，我们还要在页面中显示了出来。

2. 构思实现

1)        要想弹出带有蒙板的提示框，那么我们就可借助jQuery的方法来实现，而提示框上的那些，我们需要自己设计个<div/>的标签来实现。

2)        图片的上传，需要用户添加图片的名称，为了避免重复，我们采用UUID的方法后台全名图片名字。一旦用户上传图片成功之后，不仅要写入数据库，同时要PrintWriter的方法，将图片写出到客户端。

3. 具体实现

1)        在html的页面中，我们要设计个<div/>，其中包含了提示框要显示的文本框和相应的信息。

<div id="uploadDiv" title="上传图片" style="display:none">
<form action="proUpload" method="post"
	enctype="multipart/form-data"
	target="hideframe">
<table width="400" border="0" cellspacing="1" cellpadding="10">
<tr>
	<td height="25">图片标题：</td>
	<td><input id="title" name="title" type="text" /></td>
</tr>
<tr>
	<td height="25">浏览图片：</td>
	<td><input id="file" name="file" type="file" /></td>
</tr>
<tr>
	<td colspan="2" align="center">
	<input type="submit" value="上传" />
	<input type="reset" value="重设" />
	</td>
</tr> 
</table>
</form>
</div>

2)        对于蒙板的显示，我们是通过jQuery来实现的，所以我们还要写个关于这个实现的方法。注意这里调用的标签名就是uploadDiv。

// 打开上传窗口
function openUpload()
{

	$("#uploadDiv").show()
		.dialog(
		{
			modal: true,
			title: '上传照片',
			resizable: false,
			width: 428,
			height: 220,
			overlay: {opacity: 0.5 , background: "black"}
		});
}

3)        接下来就来到了实现上传图片的核心地方了，那就是我们要使用Java的I/O来实现文件的上传，还有就是文件的读取。

@WebServlet(urlPatterns="/proUpload")
public class ProUploadServlet extends BaseServlet
{

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException
	{
		
		Iterator iter = null;
		String title = null;
		response.setContentType("text/html;charset=gbk");
		//获取输出流
		PrintWriter out = response.getWriter();
		try
		{
			//使用Upload处理上传
			FileItemFactory factory = new DiskFileItemFactory();
			ServletFileUpload upload = new ServletFileUpload(factory);
			List items = upload.parseRequest(request);
			iter = items.iterator();
			//遍历每个表单控件对应的内容
			while (iter.hasNext())
			{
				FileItem item = (FileItem)iter.next();
				//如果该项是普通表单域
				if (item.isFormField())
				{
					String name = item.getFieldName();
					if(name.equals("title"))
					{
						title = item.getString("gbk");
					}
				}
				//如果是需要上传的文件
				else
				{
					String user = (String) request.getSession().getAttribute("curUser");
					String serverFileName = null;
					//返回文件名
					String fileName = item.getName();
					//取得文件后缀
					//String suffix = fileName.substring(fileName.lastIndexOf("."));
					//返回文件类型
					String contentType = item.getContentType();
					//只允许上传jpg、gif、png图片
					if(contentType.equals("image/pjpeg")
							|| contentType.equals("image/gif")
							|| contentType.equals("image/jpeg")
							|| contentType.equals("image/png"))
					{
						InputStream input = item.getInputStream();
						serverFileName = UUID.randomUUID().toString();
						//System.out.println("filename:"+fileName);
						//判断文件夹是否存在
						createFile(request,out);
						
						FileOutputStream output = new FileOutputStream(
								getServletContext().getRealPath("/")
								+ "uploadfiles\\" + serverFileName );
								//+ suffix);
						byte[] buffer = new byte[1024];
						int len = 0;
						while ((len = input.read(buffer)) > 0)
						{
							output.write(buffer, 0, len);
						}
						input.close();
						output.close();
						as.addPhoto(user, title, fileName, serverFileName);
								//+ suffix);
						out.write("<script type='text/javascript'>"
								+ "parent.callback('恭喜你，文件上传成功！')"
								+ "</script>");
					}
					else
					{
						out.write("<script type='text/javascript'>"
								+ "parent.callback('本系统只允许上传"
								+ "JPG、GIF、PNG图片文件，请重试！')</script>");
					}
				}
			}
		}
		catch (FileUploadException e)
		{
			e.printStackTrace();
			out.write("<script type='text/javascript'>"
					+ "parent.callback('处理上传文件出现错误，请重试！')"
					+ "</script>");
		}
		catch(AlbumException ex)
		{
			ex.printStackTrace();
		} 
	}
	
	/**
	 * 创建文件夹uploadfiles
	 * @param request
	 * @param out
	 */
	public void createFile(HttpServletRequest request, PrintWriter out)
	{
		String filePath = request.getSession().getServletContext().getRealPath("uploadfiles");
		File file =new File(filePath);    
		//如果文件夹不存在则创建    
		if  (!file .exists()  && !file .isDirectory())      
		{       
		    file .mkdir();   
		} else   
		{  
			out.println("alert('系统错误！');");  
		}  
	}
}