程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> JSP編程 >> 關於JSP >> 用JSP實現數據庫圖片的存儲與顯示實例

用JSP實現數據庫圖片的存儲與顯示實例

編輯:關於JSP

     1. 引言

      數據庫應用程序,特別是基於WEB的數據庫應用程序,常會涉及到圖片信息的存儲和顯示。

      通常我們使用的方法是將所要顯示的圖片存在特定的目錄下,在數據庫中保存相應的圖片的名稱,在JSP中建立相應的數據源,利用數據庫訪問技術處理圖片信息。但是,如果我們想動態的顯示圖片,上述方法就不能滿足需要了。我們必須把圖片存入數據庫,然後通過編程動態地顯示我們需要的圖片。實際操作中,可以利用JSP的編程模式來實現圖片的數據庫存儲和顯示。

      2. 建立後台數據庫

    if exists (select * from dbo.sysobjects
    where id = object_id(N'[dbo].[p]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
    drop table [dbo].[p]
    GO
    CREATE TABLE [dbo].[p] (
    [picid] [int] IDENTITY (1, 1) NOT NULL ,
    [picname] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
    [pic] [image] NULL
    ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
    GO

      3.向數據庫存儲二進制圖片

      啟動Dreamweaver MX後,新建一個JSP文件。其代碼如下所示。

    <%@ page contentType="text/html;charset=gb2312"%>
    <%
    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 'InputImage.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>
    <form action="testimage.jsp" method="POST"><br>
    題目<input name="picname" type="text"><br>
    圖片<input name="pic" type="file"><br>
    <input type="Submit" name="button1" value="提交"><br>
    </form>
    </body>
    </html>

      將此文件保存為InputImage.jsp文件,其中testimage.jsp文件是用來將圖片數據存入數據庫的,具體代碼如下所示:

    <%@ page contentType="text/html;charset=gb2312"%>
    <%@ page import="java.sql.*" %>
    <%@ page import="java.util.*"%>
    <%@ page import="java.text.*"%>
    <%@ page import="java.io.*"%>
    <jsp:useBean id="conn" scope="page" class="dbconn.DBResult"/>
    <%
    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 'testimage.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>
    <%
    request.setCharacterEncoding("gb2312");
    //建立Statement對象
    String picname=request.getParameter("picname");
    String pic=request.getParameter("pic");
    //獲得所要顯示圖片的標題、存儲路徑、內容,並進行中文編碼
    FileInputStream str=new FileInputStream(pic);
    String sql="insert into p(picname,pic) values(?,?)";
    PreparedStatement pstmt=conn.getPreparedStatement(sql);
    pstmt.setString(1,picname);
    pstmt.setBinaryStream(2,str,str.available());
    pstmt.execute();
    //將數據存入數據庫
    out.println("Success,You Have Insert an Image Successfully");
    %>
    </body>
    </html>

      4. 網頁中動態顯示圖片

      接下來我們要編程從數據庫中取出圖片,其代碼如下所示。

    <%@ page contentType="text/html;charset=gb2312"%>
    <%@ page import="java.sql.*" %>
    <%@ page import="java.util.*"%>
    <%@ page import="java.text.*"%>
    <%@ page import="java.io.*"%>
    <jsp:useBean id="conn" scope="page" class="dbconn.DBResult"/>
    <%
    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 'testimageout.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>
    <%
    int id= Integer.parseInt(request.getParameter("picid"));
    String sql = "select pic from p WHERE picid="+id;
    ResultSet rs=conn.getResult(sql);
    while(rs.next())
    {
    ServletOutputStream sout = response.getOutputStream();
    //圖片輸出的輸出流
    InputStream in = rs.getBinaryStream(1);
    byte b[] = new byte[0x7a120];
    for(int i = in.read(b); i != -1;)
    {
    sout.write(b);
    //將緩沖區的輸入輸出到頁面
    in.read(b);
    }
    sout.flush();
    //輸入完畢,清除緩沖
    sout.close();
    }
    %>
    </body>
    </html>

      將此文件保存為testimageout.jsp文件。下一步要做的工作就是使用HTML標記:

    <%@ page contentType="text/html;charset=gb2312"%>
    <%@ page import="java.sql.*" %>
    <%@ page import="java.util.*"%>
    <%@ page import="java.text.*"%>
    <%@ page import="java.io.*"%>
    <jsp:useBean id="conn" scope="page" class="dbconn.DBResult"/>
    <%
    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 'lookpic.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>
    <%
    String sql = "select * from p";
    ResultSet rs=conn.getResult(sql);
    while(rs.next())
    {
    %>
    <ccid_file values="testimageout" % />" width="100" height="100">
    <br>
    <%
    }
    rs.close();
    %>
    </body>
    </html>

    1. 上一頁:
    2. 下一頁:
    Copyright © 程式師世界 All Rights Reserved