Dynamic File Upload in JSP, without refreshing, using Ajax and jQuery

We have already covered a tutorial for Dynamic file upload in Php, and as now we have also started covering JSP and Advanced Java in our Tutorials, so we made this script using JSP and Servlet too for the web developers who develop using JSP. In this Script we have used jQuery and Ajax for making the Upload Dynamic. We have also used Part Interface of Java.

We have used the NetBeans 7.0 IDE for developing this application, you can use any IDE which you want. You just need to make the JSP files, Servlets and Java Class enclosed in the Download File.

css

• style.css

js

• jquery.form.js
• jquery-1.7.1.min.js

Java Class

• FileName.java

Servlet

• displayImage.java

JSP Files : file_upload.jsp , ajax_file.jsp 

Download the Script

In this script we just have implemented how to upload file and preview it without refreshing the page. Database connectivity is not included, but you can very easily save the uploaded file's name into database by using a simple prepared statement to do that.

  file_upload.jsp :  

//Include these two jquery files
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
//script to display the preview of uploaded file
<script type="text/javascript" >
$(document).ready(function() 
{ 
$('#photoimg').change(function()
{
$("#imageform").ajaxForm(
{
target: '#preview'
}).submit();
});}); 
</script>
//Form to upload file or image
<form action="ajax_upload.jsp" id="imageform" method="post" enctype="multipart/form-data">
Upload image from your computer : <input type="file" id="photoimg" name="photoimg"/>
</form>
//div to display uploaded file
<div id='preview'></div>

  ajax_file.jsp :  

<%@page import="model.*;" %>   //Include Java Class in the model package

<%! OutputStream fout = null;

    InputStream filecontent = null; 

    String type="";

%>

<%

final String path ="d:/myfolder/";  //Location of upload folder

final Part filePart = request.getPart("photoimg");

//get content type of the file

type=filePart.getHeader("content-type");

//checking content type of file. 

if( type.equals("image/jpeg") || type.equals("image/png") ||

 type.equals("image/jpg") || type.equals("image/gif") ||

type.equals("image/bmp") )

{

final String fileName = FileName.getFileName(filePart);

//copy the content of the file

try {

fout = new FileOutputStream(new File(path + File.separator + fileName));

filecontent = filePart.getInputStream();

int read = 0;

final byte[] bytes = new byte[32*1024];

while ((read =filecontent.read(bytes)) != -1) {

fout.write(bytes, 0, read);

}

fout.flush();

fout.close();

%>

%lt;!-- displayImage is the name of the servlet which will read the image file and set it on response object-->

<img src="displayImage/<%=fileName%>" />

<% } catch (Exception e) { %>

<div style="font-size:30px; color:red">File is not successfully uploaded</div>

<% } } else { %<

<div style="font-size:30px; color:red">Please upload image(jpeg,jpg,gif,bmp,png) file only</div>

<% } %>

Apart from these two jsp pages you will have to make a Java package, in that package create a Java class file, named FileName.java and a servlet outside the model package named displayImage.java file.

Copy the content of Java Class file and servlet into these files respectively. Create a new folder for uploads, where the images/files will be uploaded and copy-paste its address in path variable in ajax_file.jsp file.

  web.xml :  

<servlet>
<servlet-name>displayImage</servlet-name>
<servlet-class>displayImage</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>displayImage</servlet-name>
<url-pattern>/displayImage/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>file_upload.jsp</welcome-file>
</welcome-file-list>

For any problem, do feel free to comment, we will try our best to help you out. And do comment and share this post with your friends. We will be coming up with more tutorials for JSP soon.