Of Stack

Detailed Explanation of Uploading and Displaying Methods of Pictures in JSP

  • 2021-07-09 09:00:47
  • OfStack

This paper describes the uploading and displaying methods of pictures in JSP with examples. Share it for your reference. The details are as follows:

1. Introduction

Database applications, especially those based on WEB, often involve the storage and display of picture information. Usually we use the method is to display the pictures in a specific directory, save the corresponding picture name in the database, establish the corresponding data source in JSP, and use the database access technology to deal with the picture information. However, if we want to display pictures dynamically, the above method cannot meet the needs. We must store the pictures in the database, and then dynamically display the pictures we need through programming. In practice, we can use the programming mode of JSP to realize the database storage and display of pictures.

2. Establish a background database

Assuming that we are dealing with picture news, we can establish corresponding databases and data table objects. The SQL script for the data table structure we want to access is as follows: 


if exists (select * from dbo.sysobjects where id =
object_id(N'[dbo].[picturenews]') andOBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[picturenews]
GO
CREATE TABLE [dbo].[picturenews] (
    [id] [int] IDENTITY (1, 1) NOT NULL ,
    [image] [image] NULL ,
    [content] [varchar] (500) COLLATE Chinese_PRC_CI_AS NULL ,
    [detail] [varchar] (5000) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

In the table picturenews, the field id is used as the identification, and every row of data stored is automatically increased by 1. Field image
It is used to store picture information, and its data type is "image".

3. Store binary pictures to the database

Create a new JSP file. The code is as follows. 


<%@ page contentType="text/html;charset=gb2312"%>
<HTML>
<HEAD>
<TITLE> Save pictures </TITLE>
</HEAD>
<body>
<!--  The following form will use the Post Method to pass the data to the testimage.jsp Documents  -->
<FORM METHOD=POST ACTION="testimage.jsp">
 New   Smell   Standard   Title: <INPUT TYPE="text" NAME="content"><BR>
 New   Smell   Figure   Film: <INPUT TYPE="file" NAME="image"><BR>
 News content: <TEXTAREA name="txtmail" rows="15" cols="90" style="BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 9pt; HEIGHT: 200px; WIDTH: 100%" wrap="physical" ></TEXTAREA><br>
<INPUT TYPE="submit"></form>
</body>
</HTML>

Save this file as an InputImage. jsp file, where the testimage. jsp file is used to store the picture data into the database, as follows: 


<%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.*"%>
<%@ page import="java.text.*"%>
<%@ page import="java.io.*"%>
<html>
<body>
<%Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver"); // Load driver class 
 Connection con=DriverManager.getConnection("jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=upload_Image","sa","sa");
// Establish a database online, where upload_Image Is the database name, sa Is the account number and password for connecting to the database. 
Statement stmt=con.createStatement();
// Establish Statement Object 
String content=request.getParameter("content");
content=new String(content.getBytes("8859_1"),"gb2312");
String filename=request.getParameter("image");
filename=new String(filename.getBytes("8859_1"),"gb2312");
String detail=request.getParameter("txtmail");
detail=new String(detail.getBytes("8859_1"),"gb2312");
// Obtain the title, storage path and content of the picture to be displayed, and encode it in Chinese 
FileInputStream str=new FileInputStream(filename);
String sql="insert into picturenews(content,image,detail) values(?,?,?)";
PreparedStatement pstmt=con.prepareStatement(sql);
pstmt.setString(1,content);
pstmt.setBinaryStream(2,str,str.available());
pstmt.setString(3,detail);
pstmt.execute();
// Store data in a database 
out.println("Success,You Have Insert an Image Successfully");
%>

4. Dynamic display of pictures in web pages

Next, we will program to take out the picture from the database, and 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.*"%>
<html>
<body>
<%
<%Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver"); // Load driver class 
 Connection con=DriverManager.getConnection("jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=upload_Image","sa","sa");
// Establish a database online, where upload_Image Is the database name, sa Is the account number and password for connecting to the database. 
Statement stmt=con.createStatement();
ResultSet rs=null;
// Establish ResultSet (Result Set) Object 
int id= Integer.parseInt(request.getParameter("id"));
// Get the number of the picture to display id And converted to an integer type 
String sql = "select image from picturenews WHERE id="+id+"";
// Object to execute the query SQL Statement 
rs=stmt.executeQuery(sql);
while(rs.next()) {
ServletOutputStream sout = response.getOutputStream();
// Output stream of picture output 
InputStream in = rs.getBinaryStream(1);
byte b[] = new byte[0x7a120];
for(int i = in.read(b); i != -1;)
{
sout.write(b);
// Output the input of the buffer to the page 
in.read(b);
}
sout.flush();
// Enter, clear buffer 
sout.close();
}
%>
</body>
</html>

Save this file as an testimageout. jsp file. The next step is to use the HTML tag:

< IMG src="testimageout.jsp?id= < %=rs.getInt("id")% > " width=100 height=100 >
Take out the picture to be displayed, where id is the number of the picture to be taken out. In this example, we output the first and last picture information, and the detailed program code is as follows. 


<%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="java.sql.*" %>
<html>
<head>
<title> Dynamic display of database pictures </title>
</head>
<body>
<%
<%Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver"); // Load driver class 
 Connection con=DriverManager.getConnection("jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=upload_Image","sa","sa");
// Establish a database online, where upload_Image Is the database name, sa Is the account number and password for connecting to the database. 
Statement stmt=con.createStatement();
String sql=new String();
sql= "select * from picturenews";
ResultSet rs=stmt.executeQuery(sql);
rs.last();
// Move the pointer to the end 1 A record 
%> 
<table>
<tr><td><IMG height=99 src="testimageout.jsp?id=1" width=136></td>
// Take out the diaphragm 1 Pictures 
<td><IMG height=99 src="testimageout.jsp?id=<%=rs.getInt("id")%>" width=136></td>
// Take out the last 1 Pictures 
</tr></table>
</body>
</html>

The above WEB application was debugged in Windows xp/SQL Server 2000/Apache Tomcat 4.0/Jbuilder environment.

I hope this article is helpful to everyone's JSP programming.

Related articles: