• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Asynchronous File Upload using Ajax, jQuery Progress Bar and Java

March 20, 2011 //  by Krishna Srinivasan//  Leave a Comment

Introduction

In this tutorial you will learn about Asynchronous File Upload using Ajax, jQuery Progress Bar and Java

The image below shows a screenshot of the file upload that we are going to learn in this tutorial.

also read:

  • HTML Tutorials
  • CSS Tutorials
  • JavaScript Tutorials

Let us see what all is needed to develop this application. We shall create a web application which has the following files.

  • FileUpload.html (The html/jsp file where the file upload happens)
  • jQuery related script files(We are going to discuss about this in detail later)
  • FileUploadListener.java(The listener file which listens to the file upload)
  • FileUploadListener.java (The servlet file which takes care of the upload process)
  • web.xml

The image below shows the screenshot of the file Structure. We have used netBeans IDE to develop the web Application.

File Structure

Let us try to understand the webstructure.We have a web folder which has FileUpload.html.The source packages has a java package “fileupload” which has two java files FileUploadListener.java and FileUploadServlet.java

There is another folder called “scripts” which has jquery.js which is used for the core javascript and Ajax features of jQuery library.
Apart from this we also have ui.core.js and ui.progressbar.js. These files are necessary for constructing a progress bar using jQuery.You can download the latest version of jQuery from Download jQuery

The jquery progress bar can be downloaded from Download jQuery UI

Now let us add in code into FileUpload.html
We shall be adding script , style and html body sections to the html files. Lets deal with each one of these sections one after the other.

Please find below the code for the html body section.

Html Body Code

<body>
		<center>
			<h2 class="backgroundClass">Sample File Upload</h2>
			<form id="myForm" enctype="multipart/form-data" method="post" target="uploadFrame" 
				action="example/FileUploadServlet" onsubmit="ajaxFunction()">
				<table border="1">
					<tr><td> <h4>File to be uploaded </h4></td><td>  <input type="file" name="txtFile" id="txtFile"		/></td></tr>
					<tr><td align="center" colspan="2">  <input type="submit" id="submitID" name="submit" value="Upload" /></td></tr>
				</table>
			</form>
			<div id="progressbarWrapper" style="height:20px;width:100px; ">
				<div id="progressbar" style="height:100%;"></div>
			</div>
			<br/>
			<div id="status" style="display:none">
				<table width="100%" class="backgroundClass">
					<tr>
					<td align="center" nowrap="nowrap">
						<div id="percentDone" style="font-weight: bold;"> </span>
					</td>
					</tr>
				</table>	
				<table width="100%" class="backgroundClass">
					<tr>
					<td align="center" nowrap="nowrap">
						<div id="bytesRead" style="font-weight: bold;"> </span>
					</td>
					</tr>
				</table>	
				<table width="100%" class="backgroundClass">
					<tr>
					<td align="center" nowrap="nowrap">
						<div id="totalNoOfBytes" style="font-weight: bold;"> </span>
					</td>
					</tr>
				</table>
			</div>
		</center>
		</body>

Script Code

Add the following code to the script section.
The script code pasted below will import the various script files necessary for jQuery core functions, progress bar and Ajax.
After importing, we need to do the following tasks:

  • Add the progressbar to the page(The progress bar will be hidden on the load of the page and will be shown only when the file upload begins.)
  • Make an Ajax request to the java Servlet(Servlet code will be discussed later).The Java Servlet will take care of the file upload on the server.
  • The ajaxFunction() will take care of sending the xmlHttpRequest.
  • funcReadyStateChange() will be invoked soon after getting the output.It takes care of the collecting the servlet output which is in the form of XML.funcReadyStateChange()will also take care of:
    • Parsing the response XML.
    • Updating the progress bar value through updateProgressbar() function
    • Update the page with the response.
  • The output xml will have details about the total number of bytes present in the file and the number of bytes uploaded.
  • Please note that the funcReadyState will make repetitive calls to ajaxFunction() and updateProgressBar() until the file is completely uploaded.Every request that is sent will get the recent most values of the “number of bytes that are uploaded” from the server.
<script src="scripts/jquery.js"></script>
	<script src="scripts/ui.core.js"></script>
	<script src="scripts/ui.progressbar.js"></script>
	<script src="scripts/ui.resizable.js"></script>
	<script>
		var progressBarValue=0;
		$(document).ready(function() {
			$( "#progressbar" ).progressbar({             value:0         });
			document.getElementById("progressbarWrapper").style.display = "none";
		});
        function updateProgressBar(progressBarValue)
        {
			$("#progressbar").progressbar("option","value",progressBarValue);
		}
        var req;

        function ajaxFunction(){
			var url = "example/FileUploadServlet";
            
            if (window.XMLHttpRequest){ 
				req = new XMLHttpRequest();
                try{
					req.onreadystatechange = funcReadyStateChange;
                    req.open("GET", url, true);
                } catch (e) {
					alert(e);
                }
                req.send(null);
            }

            else if (window.ActiveXObject) { 
				req = new ActiveXObject("Microsoft.XMLHTTP");
                if (req) {
					req.onreadystatechange = funcReadyStateChange;
                    req.open("GET", url, true);
                    req.send();
                }
            }
        }
             
        function funcReadyStateChange(){
			if (req.readyState == 4){
				if (req.status == 200){
					var xml = req.responseXML;
					var responseNode=xml.getElementsByTagName("response")[0];
					var noOfBytesRead =responseNode.getElementsByTagName("bytes_read")[0].
						childNodes[0].nodeValue;
					var totalNoOfBytes = responseNode.getElementsByTagName("content_length")[0].
						childNodes[0].nodeValue;
					progressBarValue=noOfBytesRead/totalNoOfBytes*100;             
					document.getElementById("status").style.display="block";
					document.getElementById("percentDone").innerHTML="Percentage Completed: "
						+Math.floor(progressBarValue)+"%";
					document.getElementById("bytesRead").innerHTML= "Number Of Bytes Read: "+
						noOfBytesRead;
					document.getElementById("totalNoOfBytes").innerHTML= "Total Number Of Bytes: "+
						totalNoOfBytes;
					document.getElementById("progressbarWrapper").style.display = "block";
                        
                    if (progressBarValue<100){
						window.setTimeout("ajaxFunction();", 100);
                        window.setTimeout("updateProgressBar(progressBarValue);", 100);
                           
                    } else {
                        alert("Done");
                        window.setTimeout("updateProgressBar(100);", 100);
                        document.getElementById("progressbarWrapper").style.display = "none";
                        document.getElementById("status").style.display="none";
                    }
				} else {
					alert(req.statusText);
				}
            }
        }
	</script>

Style Code

Now add the following code to the style section.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" 
		rel="stylesheet" type="text/css"/> 
		<link href="style/ui.all.css" rel="stylesheet" type="text/css"/> 
		<link href="style/ui.core.css" rel="stylesheet" type="text/css"/> 
		<link href="style/ui.progressbar.css" rel="stylesheet" type="text/css"/> 
		<style type="text/css">
			.ui-progressbar-value { background-image: url(images/progressBarImage.jpg); }
			.backgroundClass
			{
				background-image: url(images/background.jpg);
				color:white;
			}
		</style>

Listener Code

This listener will listen to the event of file upload and has a method called fileUpdate() which will be automatically invoked as and when there is an update on fileUpload.

package fileupload;
	import org.apache.commons.fileupload.ProgressListener;
	public class FileUploadListener implements ProgressListener{
		private volatile long bytesRead = 0L, contentLength = 0L, item = 0L;   
		public FileUploadListener() {
			super();
		}

		public void update(long aBytesRead, long aContentLength, int anItem) {
			bytesRead = aBytesRead;
			contentLength = aContentLength;
			item = anItem;
		}

		public long getBytesRead() {
			return bytesRead;
		}

		public long getContentLength() {
			return contentLength;
		}
	
		public long getItem() {
			return item;
		}
	}

Servlet Code

The servlet will get the information about the number of bytes read through the listener and will construct a response xml with tags “bytes-read” and “content-length” etc.

package fileupload;
	
	import javax.servlet.Servlet;
	import javax.servlet.http.HttpServlet;
	import java.io.*;
	import java.util.*;
	import javax.servlet.http.*;
	import org.apache.commons.fileupload.*;
	import javax.servlet.ServletException;
	import org.apache.commons.fileupload.disk.DiskFileItemFactory;
	import org.apache.commons.fileupload.servlet.ServletFileUpload;
	
	public class FileUploadServlet extends HttpServlet implements Servlet {
	
	    private static final long serialVersionUID = 2740693677625051632L;
	
	    public FileUploadServlet() {
	        super();
	    }

		protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	        PrintWriter out = response.getWriter();
		    HttpSession session = request.getSession();
	        FileUploadListener listener = null;
			StringBuffer buffy = new StringBuffer();
		    long bytesRead = 0, contentLength = 0;

	        if (session == null) {
	            return;
		    } else if (session != null) {
	            listener = (FileUploadListener) session.getAttribute("LISTENER");

		        if (listener == null) {
			        return;
	            } else {
		            bytesRead = listener.getBytesRead();
	                contentLength = listener.getContentLength();
		        }
	        }

		    response.setContentType("text/xml");
	
		    buffy.append("<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n");
			buffy.append("<response>\n");
	        buffy.append("\t<bytes_read>" + bytesRead + "</bytes_read>\n");
	        buffy.append("\t<content_length>" + contentLength + "</content_length>\n");

	        if (bytesRead == contentLength) {
	            buffy.append("\t<finished />\n");
		        session.setAttribute("LISTENER", null);
	        } else {
		        long percentComplete = ((100 * bytesRead) / contentLength);
	            buffy.append("\t<percent_complete>" + percentComplete + "</percent_complete>\n");
		    }
	        buffy.append("</response>\n");
		    out.println(buffy.toString());
	        out.flush();
		    out.close();
	    }

		protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	        FileItemFactory factory = new DiskFileItemFactory();
		    ServletFileUpload upload = new ServletFileUpload(factory);
	        FileUploadListener listener = new FileUploadListener();
		    HttpSession session = request.getSession();
			session.setAttribute("LISTENER", listener);
	        upload.setProgressListener(listener);
		    List uploadedItems = null;
			FileItem fileItem = null;
	        String filePath = "c:\\temp";

		    try {
			    uploadedItems = upload.parseRequest(request);
	            Iterator i = uploadedItems.iterator();
	
		        while (i.hasNext()) {
			        fileItem = (FileItem) i.next();
				    if (fileItem.isFormField() == false) {
					    if (fileItem.getSize() > 0) {
						    File uploadedFile = null;
							String myFullFileName = fileItem.getName(), myFileName = "", slashType = (myFullFileName.lastIndexOf("\\") > 0) ? "\\" : "/";
	                        int startIndex = myFullFileName.lastIndexOf(slashType);
		                    myFileName = myFullFileName.substring(startIndex + 1, myFullFileName.length());
			                uploadedFile = new File(filePath, myFileName);
				            fileItem.write(uploadedFile);
					    }
	                }
		        }
			} catch (FileUploadException e) {
	            e.printStackTrace();
		    } catch (Exception e) {
			    e.printStackTrace();
	        }
		}
	}

web.xml

We need to declare the servlet and also the listener in web.xml.

<servlet>
		<servlet-name>UploadServlet </servlet-name>
		<servlet-class>fileupload.FileUploadServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>UploadServlet</servlet-name>
		<url-pattern>/example/FileUploadServlet</url-pattern>
	</servlet-mapping>
	<listener>
		<listener-class>fileupload.FileUploadListener</listener-class>
	</listener>

also read:

  • DOJO Tutorials
  • jQuery Tutorials

Conclusion

In this tutorial , we have seen how to upload a file when we have java on the server side.
We have also seen how to do the same using jQuery-Ajax and jQuery progress bar.

Category: AJAXTag: AJAX

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Apache Axis2 Web Services
Next Post: Getting Response through GWT using Http Protocol »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact