Pages Navigation Menu

Coding is much easier than you think

Ajax File Upload with Progress Bar using jQuery in Java web application

In my previous article we learnt on how to implement AJAX Style file upload in a java web application. In this post we shall learn on how to create AJAX file uploading system with progress bar which shows upload progress in percentage (%) using jQuery in java web application. I have used jQuery Form plugin for this purpose. This plugin is easy to use and supports iframe file transportation.
Ajax File Upload with Progress Bar2

Libraries required for the setup


Folder structure

Now Create a dynamic web project in Eclipse with following folder structure
project structure

Set up from browser perspective: jQuery

Jsp form which handles file uploads

<!DOCTYPE html>
<title>Ajax File Upload with Progress Bar</title>
<!-- Include jQuery form & jQuery script file. -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js" ></script>
<script src="http://malsup.github.com/jquery.form.js" ></script>
<script src="js/fileUploadScript.js" ></script>
<!-- Include css styles here -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<h3>Ajax File Upload with Progress Bar</h3>
 <form id="UploadForm" action="UploadFile" method="post" enctype="multipart/form-data">
    <input type="file" size="60" id="myfile" name="myfile"> 
     <input type="submit" value="Ajax File Upload">
       <div id="progressbox">
	 <div id="progressbar"></div>
	 <div id="percent">0%</div>
 <br />
<div id="message"></div>

The JQuery code written on the head section of the jsp page is responsible for the AJAX call made to the servlet, which in turn uploads file into server.

Js file

Shown below is the jQuery code for upload file and progress bar

$(document).ready(function() {
var options = {
	beforeSend : function() {
		// clear everything
	uploadProgress : function(event, position, total, percentComplete) {
		$("#progressbar").width(percentComplete + '%');
		$("#percent").html(percentComplete + '%');

		// change message text to red after 50%
		if (percentComplete > 50) {
		$("#message").html("<font color='red'>File Upload is in progress</font>");
	success : function() {
	complete : function(response) {
	$("#message").html("<font color='blue'>Your file has been uploaded!</font>");
	error : function() {
	$("#message").html("<font color='red'> ERROR: unable to upload files</font>");

beforeSend : this function called before form submission
uploadProgress : this function called when the upload is in progress
success : this function is called when the form upload is successful.
complete: this function is called when the form upload is completed.
Another must read:
jQuery form validation using jQuery Validation plugin

jQuery Tutorial for Beginners

Setup from the server’s perspective: Servlet


package com.fileupload;

import java.io.File;
import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class UploadFile extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private final String UPLOAD_DIRECTORY = "C:/Files/";

	protected void doPost(HttpServletRequest request,
		HttpServletResponse response) throws ServletException, IOException {
	boolean isMultipart = ServletFileUpload.isMultipartContent(request);

	// process only if its multipart content
	if (isMultipart) {
		// Create a factory for disk-based file items
		FileItemFactory factory = new DiskFileItemFactory();

		// Create a new file upload handler
		ServletFileUpload upload = new ServletFileUpload(factory);
		try {
			// Parse the request
			List<FileItem> multiparts = upload.parseRequest(request);

			for (FileItem item : multiparts) {
	    		  if (!item.isFormField()) {
        		     String name = new File(item.getName()).getName();
			     item.write(new File(UPLOAD_DIRECTORY + File.separator + name));
		catch (Exception e) 
		  System.out.println("File upload failed");



Ajax File Upload with Progress Bar

About Mohaideen Jamil

I'm a Full stack developer of IT exp in J2EE, AngularJs, MicroServices, Docker, Spring (Boot, MVC, Cloud), Bluemix, DevOps. Follow me on Facebook or Google Plus. If you like my tutorials, consider making a donation to this charity, thanks.

%d bloggers like this: