当用户登录后,只要用户原先有上传图片到服务上,那么系统就要显示出用户的图片。并且以分页在形式显示,每页三张。当然,用户只要将鼠标放到对应的列表图片上,那么右边就要显示该张图片,同时下方要显示图片的信息。如图所示。
这里我们需要在html的页面上定义个<div/>,比如,名字叫做”list”。主要是用来列表显示图片的。可是关键的功能可能是在如何去读取出这些图片,并将这些图片放到我们规定的<div/>中,还有就是鼠标放上去,右边是如何显示出来的。这里,我们可能要分为两步来完成。第一步就是GetPhotoServlet的类来获取图片,并以列表显示;第二个方可能就是通过ShowImgServlet来显示当前的图片。
在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);" onclick="turnPage(-1);">上一页</a> <a href="javascript:void(0);" onclick="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' onmouseover=\\\"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>')"); } }