Struts2(九.利用layer组件实现图片显示功能)
1.layer前端组件介绍
layer是一款口碑极佳的web弹层组件，她具备全方位的解决方案，致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富而友好的操作体验。
http://sentsin.com/jquery/layer/
使用方法
http://sentsin.com/jquery/layer/ext.html
在项目中引入layer组件
<script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.min.js"></script>
2.userlist.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="/struts-tags" prefix="s"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>用户列表</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/jslib/jquery-1.11.1.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.min.js"></script> <script type="text/javascript"> $(function(){ //显示照片 $(".picture").click(function(){ //引入layer.ext.js layer.use('extend/layer.ext.js'); $.getJSON("${pageContext.request.contextPath}/picture/getpic",{"picture.uid":this.lang},function(data){ layer.photos({ html:"", //网页路径，表示左边显示图片，右边可以显示一个网页用于介绍图片 json: data }); }); }); }); </script> </head> <body> 用户列表 <br> <br> <table class="bordered"> <thead> <tr><th>序号</th><th>用户名</th><th>密码</th><th>照片</th><th>删除</th><th>修改</th></tr> </thead> <!-- USERLIST，cuser，s存入的Stack Context --> <s:iterator value="#USERLIST" id="cuser" status="s"> <tr> <td><s:property value="#s.index+1"/></td> <td><s:property value="#cuser.userName"/></td> <td><s:property value="#cuser.pwd"/></td> <td><a href="#" class="picture" lang="<s:property value="#cuser.id"/>">照片</a></td> <td><a href="#" class="delete" lang="<s:property value="#cuser.id"/>!<s:property value="#cuser.userName"/>">删除</a></td> <td><a href="#" class="modify" lang="<s:property value="#cuser.id"/>">修改</a></td> </tr> </s:iterator> </table> <br> <br> <a href="${pageContext.request.contextPath}/main.jsp">返回主页面</a> </body> <!-- 调试 Value Stack 访问时不用加# Stack Context 访问时要加# --> <s:debug></s:debug> </html>
3.PictureAction
/** * 得到当前用户所有照片的json字符串 * @return * @throws IOException * @throws SQLException * @throws ClassNotFoundException * @throws NamingException */ public String getpic() throws IOException, SQLException, ClassNotFoundException, NamingException{ PictureDAO dao=new PictureDAO(); //从数据库中通过当前用户id获取当前用户的所有图片 ArrayList<Picture> list = dao.getPicture(picture.getUid()); //获取网站部署的根目录 String path=ServletActionContext.getRequest().getContextPath(); //调用PictureService中的getJSON方法 String json=PictureService.getJSON(list, path); response.setCharacterEncoding("utf-8"); out=response.getWriter(); out.print(json); //输出到控制台看一看 System.out.println(json); return null; }
4.PictureDAO
/** * 通过uid（当前用户id）从数据库获得当前用户的所有照片 * @param id * @return * @throws SQLException * @throws NamingException */ public ArrayList<Picture> getPicture(int id) throws SQLException, NamingException { if(conn.isClosed()) { Context ctx = new InitialContext(); DataSource ds = (DataSource) ctx.lookup("java:comp/env/jdbc/mysql"); conn = ds.getConnection(); } ArrayList<Picture> pics=new ArrayList<Picture>(); sql="select * from pictures where uid = ?"; ps=conn.prepareStatement(sql); ps.setInt(1, id); ResultSet rs = ps.executeQuery(); while(rs.next()){ Picture pic =new Picture(); pic.setId(rs.getInt(1)); pic.setUid(rs.getInt(2)); pic.setName(rs.getString(3)); pic.setUrl(rs.getString(4)); pics.add(pic); } conn.close(); return pics; }
5.创建一个PictureService类来组装json数据
package mypicture; import java.util.ArrayList; /** * 收到所有照片，返回一个json字符串 */ public class PictureService { public static String getJSON(ArrayList<Picture> list,String contextPath) { //字符串连接 StringBuilder str = new StringBuilder(); str.append("{"); //请求的状态，1表示成功，其它表示失败 \"转译字符，代表 "" str.append("\"status\": 1, "); //状态提示语 str.append("\"msg\": \"照片\", "); //相册标题 str.append("\"title\": \"whr的相册\", "); //相册id str.append("\"id\": 0, "); //初始显示的图片序号，默认0 str.append("\"start\": 0, "); str.append("\"data\": [ "); //处理照片 for (int i = 0; i < list.size(); i++) { str.append("{"); //图片名 str.append("\"name\": \"" + list.get(i).getName() + "\", "); //图片id str.append("\"pid\": 0, "); //注意这个中间的是左斜杠，若是写成右斜杠"\\"出不来结果 //图片路径 str.append("\"src\": \""+ contextPath + "/" +list.get(i).getUrl() + "\", "); //缩略图地址 str.append("\"thumb\": \"\", "); //原图宽高 str.append("\"area\": [600,800] " ); str.append("}"); //不是最后一项的话，加上，号 if (i < list.size()-1) { str.append(","); }else { break; } } str.append("]"); str.append("}"); return str.toString(); } }
6.可以对能接受的上传文件的大小进行修改
在struts.xml中修改常量struts.multipart.maxSize
<!-- 控制上传文件大小 3个0表示Kb,6个0表示Mb，这里为10Mb--> <constant name="struts.multipart.maxSize" value="10000000"/>
