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

0%

 
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() {
		$("#progressbox").show();
		// clear everything
		$("#progressbar").width('0%');
		$("#message").empty();
		$("#percent").html("0%");
	},
	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() {
		$("#progressbar").width('100%');
		$("#percent").html('100%');
	},
	complete : function(response) {
	$("#message").html("Your file has been uploaded!");
	},
	error : function() {
	$("#message").html(" ERROR: unable to upload files");
	}
};
$("#UploadForm").ajaxForm(options);
});

 
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 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");
		}
	}
}
}

 

Demo

 
Ajax File Upload with Progress Bar
 
download
 

11 Comments

  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 “http://www.albanx.com/ajaxuploader/doc.php?e=1” 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.