JSP中使用JavaBean實現迴圈瀏覽圖片
阿新 • • 發佈：2018-10-31
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>