用JSP實現資料庫圖片的儲存與顯示執行個體

來源:互聯網
上載者:User

  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>



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.