电子相册系统（六）相片列表显示

1. 功能说明

当用户登录后，只要用户原先有上传图片到服务上，那么系统就要显示出用户的图片。并且以分页在形式显示，每页三张。当然，用户只要将鼠标放到对应的列表图片上，那么右边就要显示该张图片，同时下方要显示图片的信息。如图所示。

2. 构思实现

这里我们需要在html的页面上定义个<div/>，比如，名字叫做”list”。主要是用来列表显示图片的。可是关键的功能可能是在如何去读取出这些图片，并将这些图片放到我们规定的<div/>中，还有就是鼠标放上去，右边是如何显示出来的。这里，我们可能要分为两步来完成。第一步就是GetPhotoServlet的类来获取图片，并以列表显示；第二个方可能就是通过ShowImgServlet来显示当前的图片。

3. 具体实现

在html的页面上，我们需要设计下面的标签.

<!-- 显示相片列表的元素 -->
	<td width="120" height="440" valign="top">
	<div align="center"><h3>相片列表</h3></div>
	<div id="list"></div><hr />
	<div align="center"><a href="javascript:void(0);" οnclick="turnPage(-1);">上一页</a>
		 <a href="javascript:void(0);" οnclick="turnPage(1);">下一页</a></div>
		<br/>
		<div id="imgInf" align="center"></div>
	</td>

1)        列表显示图片。在列表上显示图片，我们需要注意的是，每次地请求显示新的一页图片时，我们需要先清空列表中的信息，就是out.println("var list = $('#list').empty();");这名话来实现。同时，我们也需要用PrintWriter定义的out变量来向客户端写入html的标签。这里就是写入获取到的图片信息显示。

@WebServlet(urlPatterns="/getPhoto")
public class GetPhotoServlet extends BaseServlet
{

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException
	{
		HttpSession session = request.getSession(true);
		//从HttpSession中获取系统当前用户、相片列表的当前页码
		String name = (String) session.getAttribute("curUser");
		Object pageObj = session.getAttribute("curPage");
		//如果HttpSession中的curpage为null，则设置当前面页为第一页
		int curPage = pageObj == null ? 1 : (Integer) pageObj;
		response.setContentType("text/javascript;charset=gbk");
		//获取输出流
		PrintWriter out = response.getWriter();
		try
		{
			List<PhotoHolder> photos = as.getPhotoByUser(name, curPage);
			//清空id为list的元素
			out.println("var list = $('#list').empty();");
			
			for (PhotoHolder ph : photos)
			{
				out.println("list.append(\"<div align='center'>" +
						"<img  src='uploadfiles/"
						+ ph.getUuidName() +"' width='100' height='100' style='cursor:pointer' οnmοuseοver=\\\"showImg('"
						+ ph.getUuidName()+"','"+ph.getTitle() + "');\\\"/></div>\");");
			}
		}
		catch (AlbumException ex)
		{
			out.println("alert('" + ex.getMessage() + "请重试！')");
		}
	}
	
}

2)        鼠标的移动需要显示对应的当前图片。所以在上面的方法中，我们可能需要用onmouseover的方法。不过，我们也是通过onmouseover的函数来调用 ShowImgServlet的类的。这个时个，我们还是用jQuery的方法来实现的，不过，我们要想在显示图片信息时不会出现乱码，那就需要用encodeURI的方法，因为我们在调用ShowImgServlet时，我们是用get来请求的。下面是jQuey的方法。

// 显示照片
function showImg(fileName, imgName)
{
	//选进行一次的编码
	imgName = encodeURI(imgName);
	$.getScript("showImg?img=" + fileName +"&imgName=" + imgName);
}

进入ShowImgServlet后，我们也是要再次进行编码的。所以比较麻烦，建议大家用jQuery的post方法请求。下面要向客端写入当前图片，实现方法也是通过PrintWriter的定义变量out来实现。

@WebServlet(urlPatterns="/showImg")
public class ShowImgServlet extends BaseServlet
{

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException
	{
		String img = request.getParameter("img");
		//两次进行编码转换
		request.setCharacterEncoding("GBK");
		String imgName = request.getParameter("imgName");
		HttpSession session = request.getSession(true);
		//将用户正在浏览的图片放入HttpSession中
		session.setAttribute("curImg", img);
		session.setAttribute("width", IMG_WIDTH);
		session.setAttribute("height", IMG_HEIGHT);
		response.setContentType("text/javascript;charset=gbk");
		//获取输出流
		PrintWriter out = response.getWriter();
		out.println("$('#show').attr('src' , 'uploadfiles/" + img + "')"
				+ ".attr('width','"+ IMG_WIDTH +"')"
				+ ".attr('height','"+ IMG_HEIGHT +"');");
		out.println("$('#imgInf').empty();");
		out.println("$('#imgInf').append('<h4>图片名字："+imgName+"</h4>')");
	}
	
}