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

Ajax File Upload with Progress Bar

Ajax File Upload with Progress Bar


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("File Upload is in progress");
	success : function() {
	complete : function(response) {
	$("#message").html("Your file has been uploaded!");
	error : function() {
	$("#message").html(" ERROR: unable to upload files");

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 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


  1. 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.

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

  3. Thank

  4. 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.

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

  6. how can we do in spring framework

  7. Hi,
    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.

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

Leave a Comment

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