JSP中使用JavaBean实现浏览图片
先来看看效果图再看讲详细的思路和代码:
我总共加了三张图片进去,点击下一张会循环浏览下一张图片,点击上一张同理,下面是效果图
思路:
-
使用JavaBean来实现
-
新建一个图片类,里面的属性应该有width,height,当前图片在所有图片文件数组中的位置,图片文件的总数,一个静态的图片文件数组,一个静态的所有图片的绝对路径
-
点击下一张时把当前位置加一就行,至于循环可以当前位置加一取模图片文件总数,上一张使用判断就行了
-
需要注意的是读取文件默认的路径是在Web引擎的/bin目录中,所以所有图片的绝对路径还需要进行转换(使用subString()方法就行)
-
其次需要注意的是useBean的scope应该是session,如果是page或者是request的话会新建一个图片类,当前图片在所有图片文件数组中的位置会被置于0,那么即使点击下一张也只能跳转到第二张图片
如下是我的文件目录:
下面是我Picture类的代码:
package com.enptity;
import java.io.File;
import java.util.ArrayList;
import java.util.List;
public class Picture {
private static String FilePath = null;
private double width;// 宽
private double height;// 长
private int thisPicLoc;// 当前图片在数组里的位置
private int sumPicNum;// 图片总的个数
private File[] picLoc;// 图片
/**
* 判断是不是图片
* @param file
* @return
*/
public boolean isJpg(File file){
if(file.getAbsolutePath().endsWith(".jpg") || file.getAbsolutePath().endsWith(".JPG")){
return true;
}
return false;
}
/**
* 得到图片文件的根目录
* @return
*/
public String getAllPicPath() {
File file = new File("");
String filePath = file.getAbsolutePath();
filePath = filePath.substring(0, filePath.indexOf("bin"));
filePath += "webapps/Web/image";
return filePath;
}
/**
* 得到文件的路径
* @param isGo
* 0表示不前进(初始化) 1表示下一张 -1表示上一张
* @return
*/
public String getPicSrc(int isGo) {
String pic = "";
switch (isGo) {
case 1:
this.thisPicLoc = (this.thisPicLoc+1)%sumPicNum;
System.out.println(thisPicLoc+" "+sumPicNum);
pic = picLoc[thisPicLoc].getAbsolutePath().substring(picLoc[thisPicLoc].getAbsolutePath().indexOf("image"));
break;
case -1:
if(thisPicLoc==0){
this.thisPicLoc = sumPicNum-1;
}else{
this.thisPicLoc = this.thisPicLoc - 1;
}
pic = picLoc[thisPicLoc].getAbsolutePath().substring(picLoc[thisPicLoc].getAbsolutePath().indexOf("image"));
break;
case 0:
this.thisPicLoc = 0;
pic = picLoc[thisPicLoc].getAbsolutePath().substring(picLoc[thisPicLoc].getAbsolutePath().indexOf("image"));
break;
default:
break;
}
return pic;
}
public static String getFilePath() {
return FilePath;
}
public static void setFilePath(String filePath) {
FilePath = filePath;
}
public double getWidth() {
return width;
}
public void setWidth(double width) {
this.width = width;
}
public double getHeight() {
return height;
}
public void setHeight(double height) {
this.height = height;
}
public int getThisPicLoc() {
return thisPicLoc;
}
public void setThisPicLoc(int thisPicLoc) {
this.thisPicLoc = thisPicLoc;
}
public int getSumPicNum() {
return sumPicNum;
}
public void setSumPicNum(int sumPicNum) {
this.sumPicNum = sumPicNum;
}
public File[] getPicLoc() {
return picLoc;
}
public void setPicLoc(File[] picLoc) {
this.picLoc = picLoc;
}
public Picture() {
this.FilePath = getAllPicPath();
picLoc = new File(FilePath).listFiles();
if (picLoc != null) {
// for (int i = 0; i < picLoc.length; i++) {
// System.out.println(picLoc[i].getAbsolutePath());
// }
//过滤器
int count = 0;
List<File> list = new ArrayList<File>();
for(File file:picLoc){
if(isJpg(file)){
list.add(file);
count++;
}
}
picLoc = new File[count];
list.toArray(picLoc);
this.sumPicNum = count;
}else{
System.out.println("null");
}
}
}
JSP中的代码:
<%@page import="java.io.File"%>
<%@page import="com.enptity.*" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'showPic.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<jsp:useBean id="pic" class="com.enptity.Picture" scope="session"></jsp:useBean>
<%
int isGo = 0;//初始化进入
if(request.getParameter("isGo")!=null){
isGo = Integer.valueOf(request.getParameter("isGo"));
}
%>
<img alt="图片找不到" src="<%=pic.getPicSrc(isGo)%>" width="200" height="200"><br>
<a href="javaBean/showPic.jsp?isGo=-1"><input type="button" value="上一张"></a>
<a href="javaBean/showPic.jsp?isGo=1"><input type="button" value="下一张"></a>
</body>
</html>