Struts2(九.利用layer组件实现图片显示功能)

Posted 塔卡哈西KSK

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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"/>

以上是关于Struts2(九.利用layer组件实现图片显示功能)的主要内容,如果未能解决你的问题,请参考以下文章

uploadifive struts2实现图片上传

利用PIL实现图片的切割

九动态组件与插槽

九动态组件与插槽

九动态组件与插槽

layui图片显示