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="" ></script>
<script src="" ></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.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

Am currently working as a Struts 2 Developer in a reputed IT Organisations. I can help you with teaching Core java and Struts 2. Follow me on Facebook or Google Plus. If you like my tutorials, consider making a donation to this charity, thanks.

  • syam kumar

    Upload progress bar is working fine in case of only upload .But Download is not working while single event is performing both down load and upload files.

  • Manish

    Progress bar is not working in Internet Explorer. It shows only 0% and 100%

  • Tom W. Nuernberger
    • Mohaideen Jamil


  • Cesar Aguirre


    • Mohaideen Jamil

      Most welcome

  • Nancy

    Hey how to upload multiple files with struts2 with preview. I tried with jquery plugin but not sure of exactly which js files to be used.. cannot see the preview and progress bar just the bytes are displaying. can you please help to solve the issue? Thanks in advance.

  • Omi

    when I am writing following line,
    ServletFileUpload upload = new ServletFileUpload(factory);
    my localhost fails to start.I dont understand why it is happening.

  • rishi ranjan

    how can we do in spring framework

  • NansJames

    I tried jquery.js for multiple input. in the request mutipart is true. but upload.parseRequest(request); is returing empty.
    I used ajaxupload-min.js from “″ for preview of the image and buttons.
    In the back end am using struts2.
    Please help to solve the issue.

  • NansJames

    Can you give example for multiple file upload with delete file before upload.