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

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
{@Overrideprotected 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
{@Overrideprotected 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>')");}}