明輝手游網(wǎng)中心:是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)!

用JSP+Servlet完成二進(jìn)制圖像的動(dòng)態(tài)顯示

[摘要]數(shù)據(jù)庫(kù)應(yīng)用程序,特別是基于WEB的數(shù)據(jù)庫(kù)應(yīng)用程序,通常會(huì)涉及到圖片信息的顯示。我們知道在HTML語(yǔ)言當(dāng)中為了顯示靜態(tài)的圖片資料,可以利用如下標(biāo)記來(lái)實(shí)現(xiàn): <img src=http://cfan.net.cn/info/".image/hello.png" width=&...
數(shù)據(jù)庫(kù)應(yīng)用程序,特別是基于WEB的數(shù)據(jù)庫(kù)應(yīng)用程序,通常會(huì)涉及到圖片信息的顯示。我們知道在HTML語(yǔ)言當(dāng)中為了顯示靜態(tài)的圖片資料,可以利用如下標(biāo)記來(lái)實(shí)現(xiàn):
<img src=http://cfan.net.cn/info/".image/hello.png" width="100" height="80">,而要顯示動(dòng)態(tài)的圖片資料,就要采用相關(guān)的數(shù)據(jù)庫(kù)訪問技術(shù)來(lái)實(shí)現(xiàn)。在JSP環(huán)境編程中解決辦法多種多樣,通常是在數(shù)據(jù)庫(kù)中保存相應(yīng)的圖片資料的名稱,而后在JSP中可以建立相應(yīng)的數(shù)據(jù)源,利用數(shù)據(jù)庫(kù)訪問技術(shù)處理圖片信息。在靜態(tài)標(biāo)記的基礎(chǔ)上,略加修改就可以用如下的標(biāo)記語(yǔ)言實(shí)現(xiàn)動(dòng)態(tài)圖片資料的顯示,即:<img src="../image/"+RS_photo.getString(photo_fiield) width="100" height="80">。
以上兩種解決方案,主要是將所要顯示的圖片資料存在特定的目錄下進(jìn)行存取控制。如果圖片資料是存儲(chǔ)在數(shù)據(jù)庫(kù)中的二進(jìn)制數(shù)據(jù),上述方法就不能滿足需要了。實(shí)際操作中,可以利用JSP+Servlet的編程模式來(lái)實(shí)現(xiàn)圖片資料的瀏覽顯示。其基本思想是,用Servlet實(shí)現(xiàn)圖片資料的后臺(tái)處理,用JSP進(jìn)行頁(yè)面表現(xiàn),具體的編程思想如下所述。
1.建立后臺(tái)數(shù)據(jù)庫(kù)和數(shù)據(jù)庫(kù)應(yīng)用程序
假定處理的是某公司的員工信息,那么我們可以建立相應(yīng)的數(shù)據(jù)庫(kù)及數(shù)據(jù)表對(duì)象。假定我們要存取的數(shù)據(jù)表結(jié)構(gòu)如下所示:
/****** Object: Table [dbo].[employee] Script Date: 2002-7-31 21:42:10 ******/
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[employee]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[employee]
GO
/****** Object: Table [dbo].[employee] Script Date: 2002-7-31 21:42:10 ******/
CREATE TABLE [dbo].[employee] (
[id] [char] (10) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[name] [char] (20) COLLATE Chinese_PRC_CI_AS NULL ,
[sex] [char] (2) COLLATE Chinese_PRC_CI_AS NULL ,
[birthday] [datetime] NULL ,
[photo] [image] NULL ,
[title] [char] (20) COLLATE Chinese_PRC_CI_AS NULL ,
[department] [char] (30) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
其中,employee表中的列photo字段用于存儲(chǔ)員工的照片信息,則用于存儲(chǔ)圖像,其數(shù)據(jù)類型為“image”。接下來(lái)我們就可以建立應(yīng)用程序,向數(shù)據(jù)庫(kù)中添加圖文信息;镜牟僮鲾(shù)據(jù)庫(kù)應(yīng)用程序相對(duì)簡(jiǎn)單,大家可以利用流行的多種開發(fā)工具加以實(shí)現(xiàn),并向數(shù)據(jù)庫(kù)中添加若干記錄。圖1是利用Delphi6實(shí)現(xiàn)的一種可行存儲(chǔ)image的應(yīng)用解決方案。


圖1 Delphi6操作數(shù)據(jù)庫(kù)image列

程序?qū)崿F(xiàn)的關(guān)鍵技術(shù)是流式信息存取技術(shù)。即為了實(shí)現(xiàn)對(duì)Image列的存取,在程序中采用了數(shù)據(jù)流讀寫圖片資料。其實(shí)現(xiàn)代碼主要在數(shù)據(jù)保存和記錄集移動(dòng)的事件里。程序代碼在此就不再詳述?梢詤㈤喿髡叩奈恼隆队肈elphi6操作SQL SERVER 2000的Image列存取JPEG圖象》
2.用Jbuilder7建立WEB應(yīng)用程序
對(duì)于WEB應(yīng)用程序的實(shí)現(xiàn)方式,我們可以采用JDK 1.4 JAVA環(huán)境、Apache Tomcat 4.0和Dreamweaver MX,也可以選擇Jbuilder7的集成開發(fā)環(huán)境。下面我們以Jbuilder7集成開發(fā)環(huán)境為例說(shuō)明WEB應(yīng)用程序的具體實(shí)現(xiàn)過(guò)程。
2.1 建立數(shù)據(jù)庫(kù)連接池訪問
啟動(dòng)Jbuilder7后,新建工程readpicfromdb.jpx。在工程中建立數(shù)據(jù)庫(kù)連接池對(duì)象類,主要包括一個(gè)管理類DBConnectionManager,負(fù)責(zé)提供與多個(gè)連接池對(duì)象DBConnectionPool類之間的接口。每一個(gè)連接池對(duì)象管理一組JDBC連接對(duì)象,每一個(gè)連接對(duì)象可以被任意數(shù)量的Servlet共享。類DBConnectionPool可以提供以下功能:
● 從連接池獲取(創(chuàng)建)可用連接
● 把連接返回給連接池
● 在系統(tǒng)關(guān)閉時(shí)釋放所有資源,關(guān)閉所有連接
類DBConnectionManager則用于管理多個(gè)連接池對(duì)象,它提供以下功能:
● 裝載和注冊(cè)JDBC驅(qū)動(dòng)程序
● 根據(jù)在屬性文件中定義的屬性創(chuàng)建連接池對(duì)象
● 實(shí)現(xiàn)連接池名字與其實(shí)例之間的映射。
● 跟蹤客戶程序?qū)B接池的引用,保證睚最后一個(gè)客戶程序結(jié)束時(shí)安全地關(guān)閉所有連接池。
上述兩個(gè)類的詳細(xì)代碼,讀者可以參閱相關(guān)書籍,這里主要給出本例中用到的屬性文件db.properties其代碼如下所示:
**********數(shù)據(jù)庫(kù)連接池屬性文件db.properties***************
drivers=sun.jdbc.odbc.JdbcOdbcDriver //定義JDBC-ODBC橋驅(qū)動(dòng)程序
logfile=D:\\webapp\\log.txt //定義日志文件存放的位置和名稱
comdb.url=jdbc:odbc:graduweb //定義數(shù)據(jù)庫(kù)的JDBC的URL
comdb.maxconn=10 //定義數(shù)據(jù)庫(kù)的最大連接數(shù)
comdb.user=sa //指定用于該連接池的數(shù)據(jù)庫(kù)帳號(hào)
comdb.password=sa //數(shù)據(jù)庫(kù)相應(yīng)帳號(hào)的密碼
**********數(shù)據(jù)庫(kù)連接池屬性文件db.properties***************
最后將編譯過(guò)的包含數(shù)據(jù)庫(kù)連接池類的JAVA類DBConnectionManager.java 、DBConnectionManager.class以及上圖的db.properties文件一并放在工程文件的WEB-INF下的classes目錄下。
2.2 編寫讀取二進(jìn)制圖片的Servlet
從Jbuilder7的File菜單里選擇新建Servlet,并將其命名為getphoto。該Servlet的JAVA源代碼如下所示:
***************Servlet getphoto.java 的JAVA代碼*************
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;
import java.sql.*;
public class getphoto extends HttpServlet {
private static final String CONTENT_TYPE = "image/jpeg";
/**Initialize global variables*/
public void init() throws ServletException {
}
/**Process the HTTP Get request*/
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//在數(shù)據(jù)庫(kù)中照片的ID
String PHOTOID = null;
try {
PHOTOID = request.getParameter("photoid");
}
catch(Exception e) {
e.printStackTrace();
}
//連接數(shù)據(jù)庫(kù),自定義的數(shù)據(jù)庫(kù)連接池管理類
DBConnectionManager connMgr;
connMgr = DBConnectionManager.getInstance();
Connection conn = connMgr.getConnection("comdb"); //屬性文件中定義
//用來(lái)存儲(chǔ)照片數(shù)據(jù)的緩沖區(qū)
byte [] buf=null;
//擴(kuò)展名可以從數(shù)據(jù)庫(kù)得到,這里直接指定為JPEG
String photoname="jpeg";
try{
//根據(jù)ID查找照片
String searchSql="select photo from employee where id ="+PHOTOID;
Statement stmt = conn.createStatement();
ResultSet RS_photo = stmt.executeQuery(searchSql);
//將圖片數(shù)據(jù)讀入緩沖區(qū)
if (RS_photo.next()){
buf = RS_photo.getBytes(1);
}else
{
buf = new byte[0];
}
}catch (Exception e){
//throw e;
}
finally {
connMgr.freeConnection("comdb", conn);
}
//response.setContentType(CONTENT_TYPE);
//告訴瀏覽器輸出的是圖片
response.setContentType("image/"+photoname);
//圖片輸出的輸出流
OutputStream out = response.getOutputStream();
//將緩沖區(qū)的輸入輸出到頁(yè)面
out.write(buf);
//輸入完畢,清楚緩沖
out.flush();
}
/**Clean up resources*/
public void destroy() {
}
}
編譯后的Servlet getphoto.class也會(huì)自動(dòng)放置在工程文件的WEB-INF下的classes目錄下。
2.3 JSP實(shí)現(xiàn)數(shù)據(jù)庫(kù)圖文信息瀏覽
成功建立好Servlet后,下一步要做的工作就是將原先的HTML標(biāo)記:
<img src="../image/"+RS_photo.getString(photo_fiield) width="100" height="80">加以修改,替換為Servlet標(biāo)記。即可以將下面的標(biāo)記寫于HTML或JSP中頁(yè)面中
<img border="0" src="/servlet/getphoto?photoid=XXX&ts=AAAAA" >
其中XXX是圖片的ID,AAAAA是時(shí)間戳,用來(lái)防止圖片不刷新。如果我們要瀏覽數(shù)據(jù)庫(kù)中的所有圖文信息,可以加入適當(dāng)?shù)难h(huán)控制。在本文的示例WEB應(yīng)用程序中作者加入了簡(jiǎn)單的表格控制來(lái)修飾輸出的圖文信息。詳細(xì)的程序代碼如下所示:
***************JSP頁(yè)面瀏覽數(shù)據(jù)庫(kù)圖文信息代碼*************
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<jsp:useBean id="comdbBean" scope="page" class="dbbean.conn"/>
//使用javabean建立頁(yè)面的數(shù)據(jù)連接
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<%
int table_num=4; //指定表格每行顯示記錄的條數(shù)
ResultSet RS_photo;
strSQL="select * from employee";
RS_photo =comdbBean.executeQuery(strSQL);
out.println("<table width='75%' border='1'align='center'>");
out.println("<tr>");
while(RS_photo.next())
{
String pic01=rs.getString("id_stud");
pic01=""+pic01+"";
String employeename=rs.getString("name");
//加入表格控制
out.println("<td>");
out.println("<div align=\"center\">");
out.println("<p>");
out.println("<a
href=\"inf_ employee_details.jsp?inf_employee_id=pic01\">");
out.println("<img
border=\"0\"src=\"../servlet/getphoto?photoid="+pic01+"&ts=AAAAA\" width=\"100\" height=\"120\" align=\"absmiddle\">");
out.println("</a>");
out.println("</p>");
out.println("<p>");
out.println("<a
href=\"inf_ employee _details.jsp?inf_employee_id=pic01\">");
out.println(employeename);
out.println("</a>");
out.println("</p>");
out.println("</div>");
out.println("</td>" );
table_num++;
if((table_num%4)==0)
//如果可以被4整除,則進(jìn)入下一欄,否則繼續(xù)輸出
{
out.println("</tr>");
out.println("<tr>");
}
}
out.println(" ");
}
RS_photo.close(); //關(guān)閉數(shù)據(jù)集RS_subject
%>
</body>
</html>
在上例的程序代碼示例中,用javabean建立本JSP頁(yè)面的數(shù)據(jù)庫(kù)連接,用Servlet進(jìn)行讀取二進(jìn)制image數(shù)據(jù)。后面附加了表格修飾輸出圖文的部分代碼。程序運(yùn)行結(jié)果如下圖1-6所示。


圖2 JSP頁(yè)面瀏覽數(shù)據(jù)庫(kù)圖文信息結(jié)果

以上WEB應(yīng)用程序在Windows 2000 Server+JBuilder 7+SQL Server 2000+ Apache Tomcat 4.0環(huán)境下調(diào)試通過(guò)。