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组件实现图片显示功能)的更多相关文章
- 利用Layer组件弹出多个对话框（非嵌套）与关闭及刷新
页面A中弹出页面B,在页面B中弹出页面C,在layer做嵌套ifframe弹出时会遇到C页面被嵌套在B页面中,如果C尺寸大于B,则C将不能显示完整.这个时候可以考虑B,C页面均由A页面弹出从而避免嵌套 ...
- struts2中利用POI导出Excel文档并下载
1.项目组负责人让我实现这个接口,因为以前做过类似的,中间并没有遇到什么太困难的事情.其他不说,先上代码: package com.tydic.eshop.action.feedback; impor ...
- 前台利用jcrop做头像选择预览,后台通过django利用Uploadify组件上传图最终使用PIL做图像裁切
之前一直使用python的PIL自定义裁切图片,今天有需求需要做一个前端的选择预览页面,索性就把这个功能整理一下,分享给大家. 实现思路: 1.前端页面: 用户选择本地一张图片,然后通过鼠标缩放和移动 ...
- Android学习笔记：使用ViewPager组件实现图片切换
在很多App中,尤其是第一次安装启动后,都会出现几个图片进行一些app的介绍和说明,图片可以随着滑动而切换. 我们这里利用 ViewPager组件来演示如何实现这一点. 1.创建一个app工程,默认创 ...
- 微信小程序把玩（二十九）video组件
原文:微信小程序把玩(二十九)video组件 视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的 重要属性: wxml <!--监听button点击事件--> <button ...
- Django【第23篇】：利用Form组件和ajax实现的注册
利用Form组件和ajax实现的注册 一.注册相关的知识点 1.Form组件 我们一般写Form的时候都是把它写在views视图里面,那么他和我们的视图函数也不影响,我们可以吧它单另拿出来,在应用下面 ...
- Struts2漏洞利用实例
Struts2漏洞利用实例 如果存在struts2漏洞的站,administrator权限,但是无法加管理组,内网,shell访问500. 1.struts2 漏洞原理:struts2是一个框架,他在 ...
- 【重构】 利用 cos 组件实现jsp中上传附件
利用JSP&Servlet重构项目 利用 cos 组件实现jsp中上传附件 fileUpload.jsp --> FileUploadController.java --> fil ...
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
随机推荐
- Filter实现字符集统一设置
Filter实现字符集统一设置 其实是对request和response请求进行了拦截 1.创建Filter类,实现javax.Servlet接口 doFilter方法 //设置字符集 request ...
- [转]：理解 Linux 配置文件
简介: 本文说明了 Linux 系统的配置文件,在多用户.多任务环境中,配置文件控制用户权限.系统应用程序.守护进程.服务和其它管理任务.这些任务包括管理用户帐号.分配磁盘配 额.管理电子邮件和新闻组 ...
- 绘图驱动-OSD原理2
转载自:http://blog.pfan.cn/programming/21209.html 现在已经可以通过修改存储单元内容来改变OSD的像素,但还有个关键的问题是如何根据需要来进行操作,即如何将某 ...
- 基于vue脚手架的项目打包上线（发布）方法和误区
最近要把vue脚手架开发的一个项目上线,只知道vue脚手架是基于node的服务端项目,那么只需要 npm run dev 就可以轻松启动整个项目,当我想当然的给服务器配置合适的node环境(这里也遇到 ...
- 用Jquery控制元素的上下移动 实现排序功能
在页面上,控制元素上下移动,进行排序是我们比较常用的功能,今天我用jQuery 写个 简单方便,功能齐全的实现方式. 话不多说,直接上代码,下面是基础的引入jq和html元素部分: <scrip ...
- obfuscator-llvm Theos 集成配置
之前我写过一篇文章是关于在 Xcode 里怎么集成配置 obfuscator-llvmobfuscator-llvm Xcode集成配置 有些情况下我们使用 Theos 开发 tweak,需要将 ob ...
- 用Head方法获得百度搜索结果的真实地址
用Head方法获得百度搜索结果的真实地址 在百度中搜索"Java",第一条结果的链接为: https://www.baidu.com/link?url=HBOOMbhPKH4SfI ...
- php.ini修改后，重启无效
今天做项目,上传图,需要修改php.ini.发现修改后,多次长期服务器也没用,在网上找了好多方案.介绍一下我的流程 1.使用phpinfo()找到php.ini的位置,如果位置不准确,修改肯定没有任何 ...
- Qt——事件
1.常见事件 [1]鼠标事件 (1)坐标 x(),y(), 相对windows globalX() globalY() (2)获得点击 button() [2]键盘事件 [3]定时器事件 timerI ...
- Java垃圾回收机制概述
总览 本文会介绍垃圾回收的以下几个方面. 为什么要垃圾回收 在哪里回收 哪些对象需要回收 怎么回收 HotSpotJVM中有哪些具体的回收器可以直接用. 在开始讲垃圾回收之前,先通过一张图快速回忆一下 ...