Displaying Images( buffered data ) from the Database using Java

Thread Solved
Reply

Join Date: Apr 2007
Posts: 24
Reputation: ttamilvanan81 is an unknown quantity at this point 
Solved Threads: 0
ttamilvanan81 ttamilvanan81 is offline Offline
Newbie Poster

Displaying Images( buffered data ) from the Database using Java

 
0
  #1
Aug 28th, 2007
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
Reply With Quote Quick reply to this message  
Join Date: Aug 2007
Posts: 2
Reputation: lordkwena is an unknown quantity at this point 
Solved Threads: 1
lordkwena lordkwena is offline Offline
Newbie Poster

Re: Displaying Images( buffered data ) from the Database using Java

 
0
  #2
Aug 29th, 2007
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.
Reply With Quote Quick reply to this message  
Join Date: Apr 2007
Posts: 24
Reputation: ttamilvanan81 is an unknown quantity at this point 
Solved Threads: 0
ttamilvanan81 ttamilvanan81 is offline Offline
Newbie Poster

Re: Displaying Images( buffered data ) from the Database using Java

 
0
  #3
Aug 30th, 2007
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
Reply With Quote Quick reply to this message  
Join Date: Aug 2007
Posts: 75
Reputation: lookof2day is an unknown quantity at this point 
Solved Threads: 9
lookof2day lookof2day is offline Offline
Junior Poster in Training

Re: Displaying Images( buffered data ) from the Database using Java

 
0
  #4
Aug 31st, 2007
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();
Reply With Quote Quick reply to this message  
Join Date: Apr 2007
Posts: 24
Reputation: ttamilvanan81 is an unknown quantity at this point 
Solved Threads: 0
ttamilvanan81 ttamilvanan81 is offline Offline
Newbie Poster

Re: Displaying Images( buffered data ) from the Database using Java

 
0
  #5
Sep 1st, 2007
Originally Posted by lookof2day View Post
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>
Last edited by Ancient Dragon; Sep 1st, 2007 at 9:42 am. Reason: removed email
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:


Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC