Tuesday 3 January 2017

How to insert and retrieve image from mysql database in jsp

                        In this post, we will see how to insert and retrieve image from mysql database in jsp.
                        Here, frontend and backend programs are in JSP while database used is Mysql. Database name is "test", Database user name is also "test" and password is "123". Table name in which I have inserted image here, is "biodata". Table's configuration is shown in following screenshot:






uploadimage.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Image Upload to MySQL Database Demo</title>
</head>
<body>
    
        <h1>Image Upload to MySQL Database Demo</h1>
        <form method="post" action="uploadimagebackend.jsp">
            <table border="0">
                <tr>
                    <td>First Name: </td>
                    <td><input type="text" name="firstname" size="50"/></td>
                </tr>
                <tr>
                    <td>Last Name: </td>
                    <td><input type="text" name="lastname" size="50"/></td>
                </tr>
                <tr>
                    <td>Path of Image on Disk: </td>
                    <td><input type="text" name="photo" size="50"/></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="Submit">
                    </td>
                </tr
            </table>
        </form>
    
</body>

</html>

Output:



uploadimagebackend.jsp

<%@ page import="java.io.*,java.util.*,java.sql.*"%>

<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<html>
<head>
</head>
<body>
<div style="background-color:SlateGray">
<h1>Image Upload to MySQL Database Demo</h1>
</div>

<%


String firstname = request.getParameter("firstname");

String lastname = request.getParameter("lastname");
String myphoto = request.getParameter("photo");

Connection con=null;


ResultSet rs=null;


PreparedStatement psmt=null;


FileInputStream fis;


String url="jdbc:mysql://localhost:3306/test";


try{


Class.forName("com.mysql.jdbc.Driver").newInstance();


con=DriverManager.getConnection(url,"test","123");


File image=new File(myphoto);


psmt=con.prepareStatement("insert into biodata(firstname, lastname, photo)"+"values(?,?,?)");


psmt.setString(1,firstname);


psmt.setString(2,lastname);


fis=new FileInputStream(image);


psmt.setBinaryStream(3, (InputStream)fis, (int)(image.length()));


int s = psmt.executeUpdate();


if(s>0) {


%>


<b><font color="Blue">


<% out.println("Image Uploaded successfully!!!"); %>


</font></b>


<%


}


else 

{
out.println("Failed to upload image.");
}

con.close();

psmt.close();

}


catch(Exception ex)

{
out.println("Error in connection : "+ex);
}

%>


</body>

</html> 

Output:
                        

displayimage.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Image Upload to MySQL Database Demo</title>
</head>
<body>
    
        <form method="post" action="displayimagebackend.jsp">
            <table border="0">
                <tr>
                    <td>First Name: </td>
                    <td><input type="text" name="firstname" size="50"/></td>
                </tr>
                <tr>
                    <td>Last Name: </td>
                    <td><input type="text" name="lastname" size="50"/></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="Show Image">
                    </td>
                </tr>
            </table>
        </form>
    
</body>
</html> 

Output:



displayimagebackend.jsp

<%@ page import="java.io.*,java.util.*,java.sql.*"%>

<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<html>
<head>
</head>
<body>
<div style="background-color:SlateGray">
</div>

<% 

String firstname = request.getParameter("firstname");
String lastname = request.getParameter("lastname");

Blob image = null;

Connection con = null;
byte[] imgData = null ;
Statement stmt = null;
ResultSet rs = null;

try 

{
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","test","123");
stmt = con.createStatement();
rs = stmt.executeQuery("select photo from biodata where firstname="+"'"+firstname+"'"+" && "+"lastname="+"'"+lastname+"'");

if (rs.next()) 

{
image = rs.getBlob(1);
imgData = image.getBytes(1,(int)image.length());


else 

{
out.println("Image not found.");
return;
}

// display the image


response.setContentType("image/gif");

OutputStream o = response.getOutputStream();
o.write(imgData);
o.flush();
o.close();



catch (Exception e) 

{
out.println("Unable To Display image");
out.println("Image Display Error=" + e.getMessage());
return;


finally 

{

try 

{
rs.close();
stmt.close();
con.close();


catch (SQLException e) 

{
e.printStackTrace();
}

}


%>


</body>

</html> 

Output:



No comments:

Post a Comment