How To Store HTML img Into The MySQL Using Java

In this section you will read about how to get the image from Html img src tag and saved it into the database in Java.

How To Store HTML img Into The MySQL Using Java

How To Store HTML img Into The MySQL Using Java

In this section you will read about how to get the image from Html img src tag and saved it into the database in Java.

In this tutorial you will learn about all the steps of storing image into the database. In this example we will use the Eclipse IDE for compiling and Tomcat 7 server for deploying the application. In this example we will use jquery, Ajax, MySQL and we will create a JSP for writing the Java code for storing the image.

Example

Here I am giving a simple example for storing the image into the database using MySQL in Java. In this example I have created a JSP page named image.jsp where I have used the jquery for getting the Html img src value and and then after getting this value I used ajax for setting the src value to the hidden field inside the html form tag. And created another JSP page also where I have write the code for finding the image path and stored that image into the database.

Directory Structure

Source Code

image.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>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var imgsrc = $("img").attr("src");
//alert(imgsrc);
$('#im2').val(imgsrc);
$.ajax({
url:'imageout.jsp',
type:'POST',
data: {id:imgsrc},
success:function(res){
if(!res=="Image Stored successfully"){
window.location = "imageout.jsp?id="+res;
}else{
$("#successDiv").html(res); 
}
}
});
});
</script>
</head>
<body>
Image <img alt="" src="image/logo.jpeg" id="im">
<div id="a1"></div>
<form><input name="imgname" id="im2" type="hidden" value=""/></form>
<div id ="successDiv"></div>
</body>
</html>

imageout.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ page import="java.sql.*" %>
<%@ page import="java.io.*;" %>
<%
String imagePath = request.getParameter("id");
//if(!imagePath.equals("Image Stored successfully"))
//{
imagePath = imagePath.replace('/','\\');
String path = application.getRealPath("/");
path = path+imagePath;
System.out.println("path : "+ path);
String className = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://localhost/record";
String user = "root";
String password = "root";
Connection con = null;
PreparedStatement ps = null;
InputStream is = null;
try
{
Class.forName(className);
con = DriverManager.getConnection(url, user, password);
File image = new File(path);
System.out.println("image path : "+image.getPath());
is = new FileInputStream(image);
ps = con.prepareStatement("insert into image(img_id, img_title, img_data, img_location, img_name)"
+ "values(?,?,?,?,?)");
ps.setInt(1, 3);
ps.setString(2, "Rose India");
ps.setBinaryStream(3, is,
(int) (image.length()));
ps.setString(4, image.getParent());
ps.setString(5, image.getName());

int i = ps.executeUpdate();
if(i > 0)
{
out.println("Image Stored successfully");
System.out.println("Image Stored successfully"); 
}
ps.close();
is.close();
}
catch(Exception e)
{
System.out.print(e);
}
//}
%>

Output

To compile this example in Eclipse use CTRL+F11

When you will execute the above example successfully then the output will be as follows :

1. At browser you will see the output like as follows :

2. And at console you will see the as the output is below :

Download Source Code (WAR File).