Use JSP to store and display database images

Source: Internet
Author: User

1. Introduction

Database applications, especially WEB-based database applications, usually involve the storage and display of image information.

The common method is to store the image to be displayed in a specific directory, store the name of the image in the database, and create the corresponding data source in JSP, use Database Access technology to process image information. However, if we want to dynamically display images, the above method cannot meet our needs. We must store images in the database and dynamically display the images we need through programming. In practice, the JSP programming mode can be used to store and display image databases.

2. Create a background database

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. store binary images to the database

Start Dreamweaver MX and create a new JSP file. The Code is as follows.

<% @ 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>
Question <input name = "picname" type = "text"> <br>
Image <input name = "pic" type = "file"> <br>
<Input type = "Submit" name = "button1" value = "Submit"> <br>
</Form>
</Body>
</Html>

Save this file as an InputImage. jsp file. The testimage. jsp file is used to store image data to the database. The specific code is as follows:

<% @ 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 ");
// Create a Statement object
String picname = request. getParameter ("picname ");
String pic = request. getParameter ("pic ");
// Obtain the title, storage path, and content of the image to be displayed, and encode it in Chinese.
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.exe cute ();
// Store data into the database
Out. println ("Success, You Have Insert an Image Successfully ");
%>
</Body>
</Html>

4. dynamically display images on the webpage

Next, we will program to retrieve images from the database. The Code is as follows.

<% @ 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 ();
// Output stream of image output
InputStream in = rs. getBinaryStream (1 );
Byte B [] = new byte [0x7a120];
For (int I = in. read (B); I! =-1 ;)
{
Sout. write (B );
// Output the buffer input to the page
In. read (B );
}
Sout. flush ();
// After the input is complete, clear the buffer.
Sout. close ();
}
%>
</Body>
</Html>

Save this file as a testimageout. jsp file. The next step is to use HTML tags:

<%@ 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">
<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">
-->
<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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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.