Dear all,
I was stored the gif/jpg image into the MySQL Database as a buffered image.
But when i was retrive the image from database and display in jsp page, it will not working well.
The image is not displaying.
The content get from the database, but it's type is mismatch i think.
Here are the code i was using.

FOR UPLOADING IMAGE
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page language="java" %>
<%@ page import="java.awt.image.*"%>
<%@ page import="java.io.*"%>
<%@ page import="java.sql.*"%>
<%@ page import="java.io.File"%>
<%@ page import="javax.imageio.ImageIO"%>
<%@ page import="java.awt.image.BufferedImage,java.util.*"%>
<%@ page import="java.awt.*"%>
<%@ page import="java.util.*,com.oreilly.servlet.MultipartRequest"%>
<%
/* The Following Code is Used To Insert An Image Into Database */
String filename="";
try
{
//Download com.oreilly package
MultipartRequest multi= new MultipartRequest(request,".",5*1024*1024);
Enumeration files=multi.getFileNames();
File f=null;
while(files.hasMoreElements())
{
String name=(String)files.nextElement();
filename=multi.getFilesystemName(name);
String type=multi.getContentType(name);
f=multi.getFile(name);
System.out.println("The File is "+f);
}
Connection con=null;
String userName="root";
String password = "veradis";
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/sample",userName,password);
Statement stmt = con.createStatement();
InputStream is = new FileInputStream(f);
byte b[]=new byte[is.available()];
is.read(b);
int flag=0;
try
{
String sql = "INSERT into tbl_image(image) values('" + b + "')";
System.out.println(sql);
stmt.execute(sql);
flag=1;
}
catch(Exception e)
{
System.out.println("SQL Exception : " + e);
}
if(flag==1)
{
System.out.println("Query Executed Successfully");
}

stmt.close();
}
catch(Exception e)
{
System.out.println(e);
}
out.println("The Image is Added into Database");
%>

and FOR RETRIVE AND DISPLAY FROM THE DATABASE
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page language="java" %>
<%@ page import="java.awt.image.*"%>
<%@ page import="java.io.*"%>
<%@ page import="java.sql.*"%>
<%@ page import="javax.servlet.*"%>
<%@ page import="javax.servlet.http.*"%>
<%@ page import="java.io.File"%>
<%@ page import="javax.imageio.ImageIO"%>
<%@ page import="java.awt.image.BufferedImage,java.util.*"%>
<%@ page import="java.awt.*"%>
<html>
<head><title>JSP Page</title></head>
<body>
<%
try
{
javax.servlet.http.HttpServletResponse res=null;;
int returnValue = 0;
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
InputStream in = null;
OutputStream os = null;
Blob blob = null;
String text;
text=request.getParameter("text");
Class.forName("com.mysql.jdbc.Driver");
conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/sample","root","veradis");
final String query = "SELECT image FROM tbl_image";
conn.setAutoCommit(false);
stmt = conn.createStatement();
rs = stmt.executeQuery(query);
int i=1;
if(rs.next())
{
String len1 = rs.getString("image");
int len = len1.length();
byte [] b = new byte[len];
in = rs.getBinaryStream("image");
int index = in.read(b, 0, len);
OutputStream outImej = new FileOutputStream("C:/Documents and Settings/Tamil/Desktop/photo/img"+i+".JPG");
while (index != -1)
{
outImej.write(b, 0, index);
index = in.read(b, 0, len);
System.out.println("==========================");
System.out.println(index);
System.out.println(outImej);
System.out.println("==========================");
}
outImej.close();
i++;
}
else
{
returnValue = 1;
}
}
catch(Exception e)
{
out.println("SQLEXCEPTION : " +e);
}
%>
</body>
</html>

If i can run this code the image column was displayed as empty.
If anyone can know how to solve this problem, please help me.

Regards
Tamilvanan

Recommended Answers

All 4 Replies

What i did is: i have created a folder inside the same project, named it images, then i give a user an option to upload the image, when you upload the image, it takes the image and save it in the folder and take the image(file) name and store it into a database eg: my project name is support, inside support folder i have image folder which is @ c drive and the image name is lordkwena.gif, so in the in the database i am gonna have c:\support\image\lordkwena.gif. so after a user has logged in it collects the information from the database including the image. i have created a method so that i will access it when ever i want. here is the method:

 public void setImageI(String imageIc)
{

    image=imageIc;
}
public String getImageI()
{
    return image;
}

Hope you know what is happening here.

 ResultSet rs = state.executeQuery(Query); 
 if(rs.next())
               {

  main.setName(rs.getString(4)); 
//plz note that main is: static className main = null; meaning i have decleared a static className main to create an instance for my class
}

so rs.getString(4) this will collect the infornmation form the database.
cos i was using java, i displayed the image on a label: lblImage.setIcon(new ImageIcon(imagename));

//declaring imagename
private String imagename=""; 
//Initialising imagename
 imagename=main.getImageI();

Hope this helps, let me know if you have a problem.

Hai lordwena, Thanks for your reply.
I have already done this type of functionality, like store the images in image folder under the project root folder(ex: d:/Tomcat 5.0/webapps/<projectfolder>/<imagefolder>), and the image name was stored into the database.

But i need the concept of Store the image content into the Database usiong BLOB Datatype, and whenever we need the image, we will get the image content from the database and display it in jsp page.

This type of functionality i need to use in my project, So please help me with this. In my project i am using MYSQL Database

Anyway Thanks alot for your reply.

Regards

Tamilvanan

You are storing Images. Use BufferedInput/OutputStream. Also store the content type in a db column. And retrieve the same for setting the ContentType of jsp page. Do not do this
OutputStream outImej = new FileOutputStream("C:/Documents and Settings/Tamil/Desktop/photo/img"+i+".JPG");

Rather write the steam as byte array.

String query = "select image from images where id =1";
Statement st = con.createStatement();
ResultSet rs = st.executeQuery(query);
rs.next();


byte[] bytearray = new byte[4096];
int size=0;
InputStream sImage;
sImage = rs.getBinaryStream(1);
response.reset();
response.setContentType(rs.get("contentType"));
while((size=sImage.read(bytearray))!= -1 )
{
response.getOutputStream().write(bytearray,0,size);
}


response.flushBuffer();
sImage.close();

You are storing Images. Use BufferedInput/OutputStream. Also store the content type in a db column. And retrieve the same for setting the ContentType of jsp page. Do not do this
OutputStream outImej = new FileOutputStream("C:/Documents and Settings/Tamil/Desktop/photo/img"+i+".JPG");

Rather write the steam as byte array.

String query = "select image from images where id =1";
Statement st = con.createStatement();
ResultSet rs = st.executeQuery(query);
rs.next();

byte[] bytearray = new byte[4096];
int size=0;
InputStream sImage;
sImage = rs.getBinaryStream(1);
response.reset();
response.setContentType(rs.get("contentType"));
while((size=sImage.read(bytearray))!= -1 )
{
response.getOutputStream().write(bytearray,0,size);
}

response.flushBuffer();
sImage.close();

Hai lookof2day,

Thanks for your Reply. It's working fine.

I need to do the slideshow action for the database images.
If i get all the images from the Database, i need to provide the slideshow for all those images.

Here is the code for i have done earlier.

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page language="java" %>
<%@ page import="java.sql.*"%>
<%@ page import="java.sql.Connection.*"%>
<%@ page import="java.awt.image.*"%>
<%@ page import="java.io.*"%>
<%@ page import="java.io.File"%>
<%@ page import="javax.imageio.ImageIO"%>
<%@ page import="java.awt.image.BufferedImage,java.util.*"%>
<%@ page import="java.awt.*"%>
<%
java.util.Vector images = (java.util.Vector)request.getAttribute("images");
%>
<html>
<head>
<title>JSP Page</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
//3-way slideshow- by Suzanne Arnold (http://jandr.com/, suzanne@mail.jandr.com)
//Script featured on JavaScript Kit (http://javascriptkit.com)
//Credit must stay intact
var Onerotate_delay = 2000; // delay in milliseconds (5000 = 5 secs)
Onecurrent = 0;
var OneLinks = new Array(3);
OneLinks[0] = "http://www.freewarejava.com";
OneLinks[1] = "http://www.javascriptkit.com";
OneLinks[2] = "http://www.dynamicdrive.com";
function Onenext() {
if (document.Oneslideform.Oneslide[Onecurrent+1]) {
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent+1].value;
document.Oneslideform.Oneslide.selectedIndex = ++Onecurrent;
}
else Onefirst();
}
function Oneprevious() {
if (Onecurrent-1 >= 0) {
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent-1].value;
document.Oneslideform.Oneslide.selectedIndex = --Onecurrent;
}
else Onelast();
}
function Onefirst() {
Onecurrent = 0;
document.images.Oneshow.src = document.Oneslideform.Oneslide[0].value;
document.Oneslideform.Oneslide.selectedIndex = 0;
}
function Onelast() {
Onecurrent = document.Oneslideform.Oneslide.length-1;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
document.Oneslideform.Oneslide.selectedIndex = Onecurrent;
}
function Oneap(text) {
document.Oneslideform.Oneslidebutton.value = (text == "Stop Slideshow") ? "Start Slideshow" : "Stop Slideshow";
Onerotate();
}
function Onechange() {
Onecurrent = document.Oneslideform.Oneslide.selectedIndex;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
}
function Onerotate() {
if (document.Oneslideform.Oneslidebutton.value == "Stop Slideshow") {
Onecurrent = (Onecurrent == document.Oneslideform.Oneslide.length-1) ? 0 : Onecurrent+1;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
document.Oneslideform.Oneslide.selectedIndex = Onecurrent;
window.setTimeout("Onerotate()", Onerotate_delay);
}
}
function Onetransport(){
window.location=OneLinks[Onecurrent]
}
// End -->
</SCRIPT>
</head>
<body>
<TABLE border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD>
<form name="Oneslideform" >
<DIV align="center">
<TABLE width="150" border="1" cellspacing="0" cellpadding="4" bordercolor="#330099">
<TR>
<TD bgcolor="#330099">
<DIV align="center"><B><FONT color="#FFFFFF">Image Slideshow</FONT></B></DIV>
</TD>
</TR>
<TR>
<TD bgcolor="#FFFFFF">
<DIV align="center">
<img src="" width="500" height="400" name="Oneshow" border="1"/>
</DIV>
</TD>
</TR>
<%
String img="";
for(int i=0; i<images.size(); i++) {
img=String.valueOf(images.elementAt(0));
}
javax.servlet.http.HttpServletResponse res=null;;
int returnValue = 0;
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
InputStream in = null;
OutputStream os = null;
Blob blob = null;
String text;
text=request.getParameter("text");
Class.forName("com.mysql.jdbc.Driver");
conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/sample","root","veradis");
int i=1;
String query = "select image,type from tbl_image ";//where name ='"+images.elementAt(0)+"'";
Statement st = conn.createStatement();
rs = st.executeQuery(query);
while(rs.next())
{
byte[] bytearray = new byte[4096];
int size=0;
InputStream sImage;
sImage = rs.getBinaryStream(1);
response.reset();
response.setContentType(rs.getString("type"));
while((size=sImage.read(bytearray))!= -1 )
{
response.getOutputStream().write(bytearray,0,size);
}
%>
<TR>
<TD bgcolor="#330099">
<DIV align="center">
<SELECT name="Oneslide" onChange="Onechange();">
<%
}
%>
<OPTION value="<%=response.getOutputStream()%>"><%=response.getOutputStream()%></OPTION>
</SELECT>
</DIV>
</TD>
</TR>
<TR>
<TD bgcolor="#330099">
<DIV align="center">
<INPUT type=button onClick="Oneprevious();" value="<<" title="Previous">
<INPUT type=button name="Oneslidebutton" onClick="Oneap(this.value);" value="Start Slideshow" title="AutoPlay">
<INPUT type=button onClick="Onenext();" value=">>" title="Next">
</DIV>
</TD>
</TR>
</TABLE>
</DIV>
</form>
</TD>
</TR>
</TABLE>
<center><a href="search.do">Home</a></center>
</body>
</html>


When i was using this code, the first image only it shows. But i am using the another way for storing the image in filesystem(i.e. store the image in image folder under the project root folder), Then we get those images and provide the slideshow with all those images. The code for this functionality, it's working well.

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page language="java" %>
<%@ page import="java.sql.*"%>
<%@ page import="java.sql.Connection.*"%>
<%@ page import="java.awt.image.*"%>
<%@ page import="java.io.*"%>
<%@ page import="java.io.File"%>
<%@ page import="javax.imageio.ImageIO"%>
<%@ page import="java.awt.image.BufferedImage,java.util.*"%>
<%@ page import="java.awt.*"%>
<%
//String width=request.getAttribute("width");
//String height=request.getAttribute("height");
java.util.Vector images = (java.util.Vector)request.getAttribute("images");
%>
<html>
<head>
<title>JSP Page</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
//3-way slideshow- by Suzanne Arnold (http://jandr.com/, suzanne@mail.jandr.com)
//Script featured on JavaScript Kit (http://javascriptkit.com)
//Credit must stay intact
var Onerotate_delay = 2000; // delay in milliseconds (5000 = 5 secs)
Onecurrent = 0;
var OneLinks = new Array(3);
OneLinks[0] = "http://www.freewarejava.com";
OneLinks[1] = "http://www.javascriptkit.com";
OneLinks[2] = "http://www.dynamicdrive.com";
function Onenext() {
if (document.Oneslideform.Oneslide[Onecurrent+1]) {
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent+1].value;
document.Oneslideform.Oneslide.selectedIndex = ++Onecurrent;
}
else Onefirst();
}
function Oneprevious() {
if (Onecurrent-1 >= 0) {
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent-1].value;
document.Oneslideform.Oneslide.selectedIndex = --Onecurrent;
}
else Onelast();
}
function Onefirst() {
Onecurrent = 0;
document.images.Oneshow.src = document.Oneslideform.Oneslide[0].value;
document.Oneslideform.Oneslide.selectedIndex = 0;
}
function Onelast() {
Onecurrent = document.Oneslideform.Oneslide.length-1;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
document.Oneslideform.Oneslide.selectedIndex = Onecurrent;
}
function Oneap(text) {
document.Oneslideform.Oneslidebutton.value = (text == "Stop Slideshow") ? "Start Slideshow" : "Stop Slideshow";
Onerotate();
}
function Onechange() {
Onecurrent = document.Oneslideform.Oneslide.selectedIndex;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
}
function Onerotate() {
if (document.Oneslideform.Oneslidebutton.value == "Stop Slideshow") {
Onecurrent = (Onecurrent == document.Oneslideform.Oneslide.length-1) ? 0 : Onecurrent+1;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
document.Oneslideform.Oneslide.selectedIndex = Onecurrent;
window.setTimeout("Onerotate()", Onerotate_delay);
}
}
function Onetransport(){
window.location=OneLinks[Onecurrent]
}
// End -->
</SCRIPT>
</head>
<body>
<%-- <jsp:useBean id="beanInstanceName" scope="session" class="beanPackage.BeanClassName" /> --%>
<%-- <jsp:getProperty name="beanInstanceName" property="propertyName" /> --%>
<TABLE border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD>
<form name="Oneslideform" >
<DIV align="center">
<TABLE width="150" border="1" cellspacing="0" cellpadding="4" bordercolor="#330099">
<TR>
<TD bgcolor="#330099">
<DIV align="center"><B><FONT color="#FFFFFF">Image Slideshow</FONT></B></DIV>
</TD>
</TR>
<TR>
<TD bgcolor="#FFFFFF">
<DIV align="center">
<%
String img="";
for(int i=0; i<images.size(); i++) {
img=String.valueOf(images.elementAt(0));
} %>
<img src="photo/<%=img%>" width="500" height="400" name="Oneshow" border="1"/>
</DIV>
</TD>
</TR>
<TR>
<TD bgcolor="#330099">
<DIV align="center">
<SELECT name="Oneslide" onChange="Onechange();">
<%
if(images.size()>0) {
for(int j=0;j<images.size();j++) {
%>
<OPTION value="photo/<%=images.elementAt(j)%>"><%=images.elementAt(j)%></OPTION>
<%
} }
%>
</SELECT>
</DIV>
</TD>
</TR>
<TR>
<TD bgcolor="#330099">
<DIV align="center">
<INPUT type=button onClick="Oneprevious();" value="<<" title="Previous">
<INPUT type=button name="Oneslidebutton" onClick="Oneap(this.value);" value="Start Slideshow" title="AutoPlay">
<INPUT type=button onClick="Onenext();" value=">>" title="Next">
</DIV>
</TD>
</TR>
</TABLE>
</DIV>
</form>
</TD>
</TR>
</TABLE>
<center><a href="search.do">Home</a></center>
</body>
</html>


Using this code i am getting the images from the photo folder under the project root folder. But i need to get the images from the database.

Please help me with this.


Advance Thanks for your reply

Thanks
Tamilvanan
<email snipped>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.