Pages Navigation Menu

Coding is much easier than you think

Gridview in Servlets using jQuery DataTables plugin

Posted by on May 31, 2013 in Ajax, J2EE, jQuery, Servlet | 8 comments

 
In this article we shall learn the basic coding that required to create JQuery DataTable using JSON passed by servlet. DataTable is a jQuery plugin which adds a lot of functionality to plain HTML tables, such as filtering, paging sorting, changing page length, server side processing etc.
 
Gridview-in-Java-web-application-using-jQuery-DataTable-plugin
 

Library required

 

Installation

 
Above download will provide two JQuery plugin jquery.js and jquery.dataTables.js



 
Default stylesheet which shipped with latest DataTable download package




 

Project Structure

Create a dynamic web project with following folder structure and place the above files as shown.
 
Folder-structure-Gridview-Java-DataTable
 

Model class

 

package com.model;

public class RevenueReport {

	public RevenueReport(String company, String country, int year, int revenue) {
		this.company = company;
		this.country = country;
		this.year = year;
		this.revenue = revenue;
	}

	private String company;
	private String country;
	private int year;
	private int revenue;

	public String getCountry() {
		return country;
	}

	public int getRevenue() {
		return revenue;
	}

	public String getCompany() {
		return company;
	}

	public int getYear() {
		return year;
	}

	public void setCountry(String country) {
		this.country = country;
	}

	public void setRevenue(int revenue) {
		this.revenue = revenue;
	}

	public void setCompany(String company) {
		this.company = company;
	}

	public void setYear(int year) {
		this.year = year;
	}
}

 

Recommended reading:

 

Business class

 
This Business Service class which provides static data using model class.
 

package com.service;

import java.util.LinkedList;
import java.util.List;

import com.model.RevenueReport;

public class BusinessService {

public static List getCompanyList() {

	List listOfCompany = new LinkedList();

	listOfCompany.add(new RevenueReport("Bosch", "Germany",2012, 40000));
	listOfCompany.add(new RevenueReport("XYZ", "India",2014, 10000));
	listOfCompany.add(new RevenueReport("Robotics", "United Kingdom",2011, 35000));
	listOfCompany.add(new RevenueReport("Merch", "USA",2010, 20000));
	listOfCompany.add(new RevenueReport("Foxtron", "Indonesia",2009, 15000));
	listOfCompany.add(new RevenueReport("Benz", "Germany",2013, 50000));
	listOfCompany.add(new RevenueReport("Audi", "United Kingdom",2012, 60000));
	listOfCompany.add(new RevenueReport("Hyat", "France",2011, 30000));
	listOfCompany.add(new RevenueReport("HCL", "India",2007, 23000));
	listOfCompany.add(new RevenueReport("CTS", "USA",2010, 42000));
	listOfCompany.add(new RevenueReport("Accenture", "France",2008, 15000));
	listOfCompany.add(new RevenueReport("Air India", "India",2005, 10000));
	listOfCompany.add(new RevenueReport("Kingfisher", "India",2011, 8000));
	listOfCompany.add(new RevenueReport("Vodaphone", "Netharland",2006, 45000));
	
	return listOfCompany;
}
}

 

Jsp

 




Gridview in Servlet using jQuery DataTable plugin











Ajax based Gridview using jQuery DataTable plugin

Company Country Year Revenue

 

DataTable Parameters class

 
In reply to each request for information that DataTables makes to the server, it expects to get a well formed JSON object with some parameters.So Create a DataTable Parameters class with all those required parameters
 

package com.dataTable;

import java.util.List;

import com.model.RevenueReport;

public class DataTableParameters {
	// Data table plugin parameter
	int iTotalRecords;
	int iTotalDisplayRecords;
	String sEcho;
	String sColumns;
	List aaData;

	public int getiTotalRecords() {
		return iTotalRecords;
	}

	public void setiTotalRecords(int iTotalRecords) {
		this.iTotalRecords = iTotalRecords;
	}

	public int getiTotalDisplayRecords() {
		return iTotalDisplayRecords;
	}

	public void setiTotalDisplayRecords(int iTotalDisplayRecords) {
		this.iTotalDisplayRecords = iTotalDisplayRecords;
	}

	public String getsEcho() {
		return sEcho;
	}

	public void setsEcho(String sEcho) {
		this.sEcho = sEcho;
	}

	public String getsColumns() {
		return sColumns;
	}

	public void setsColumns(String sColumns) {
		this.sColumns = sColumns;
	}

	public List getAaData() {
		return aaData;
	}

	public void setAaData(List aaData) {
		this.aaData = aaData;
	}
}

 

Servlet implementation

 

package com.servlet;

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 com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.dataTable.DataTableParameters;
import com.model.RevenueReport;
import com.service.BusinessService;

public class DataTableServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("application/json");
		// Call business service class to get list of company
		List listOfCompany = BusinessService.getCompanyList();

		DataTableParameters dataTableParam = new DataTableParameters();
		// Set the list fetched in aaData
		dataTableParam.setAaData(listOfCompany);

		Gson gson = new GsonBuilder().setPrettyPrinting().create();
		// Convert Java Object to Json
		String json = gson.toJson(dataTableParam);

		response.getWriter().print(json);
	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

 

web.xml

Make sure you have done servlet mapping properly in web.xml file. An example of this is given below,
 



	displayData
	displayData
	com.servlet.DataTableServlet


	displayData
	/displayData


	index.jsp


 

download
 

Reference

 
jQuery DataTables in Java Web Applications
 

Read More

AJAX in Servlet & jsp using JQuery – Java web application

Posted by on May 18, 2013 in J2EE, Java, jQuery | 5 comments

 
jQuery-Ajax-Servlet-Jsp
 
Implementing Ajax features in a Java web application will be so easy if you are using JQuery library; Since this library provides built-in methods that can be used to enable Ajax. In this post, I am going to demonstrate the JQuery’s Ajax capability using on blur event in java web application.
 

Folder Structure

 
jquery-ajax-basic
 
As highlighted in the image download the jQuery library and place in js folder of eclipse work-space, and refer this jQuery files in the head section in the jsp, this jQuery file is responsible for the AJAX call made to the servlet and for updating the response back in the JSP.
 

Jsp Page

 



AJAX in java web application using jQuery




AJAX implementation in JSP and Servlet using JQuery
Enter your Name:
Response from jQuery Ajax Request on Blur event

 

JS File

 
File: ajax.js
In this file we will fire ajax via jquery get method to call java servlet

$(document).ready(function() {
	$('#userName').blur(function(event) {
		var name = $('#userName').val();
		$.get('JqueryServlet', {
			userName : name
		}, function(responseText) {
			$('#ajaxResponse').text(responseText);
		});
	});
});

 
Here when the user types a name in the “userName textbox” and click anywhere outside the textbox, then its blur event gets triggered and the ‘get’ function executes the Ajax GET request on the Servlet. Here the first argument of get method is the URL, second argument is a key-value pair that passes the parameter from JSP to Servlet and the third argument is a function that defines what is to be done with the response that is got back from the Servlet.
 
Note :
This get method is a shorthand Ajax function, which is equivalent to:

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

 

Recommended reading:

  • Ajax implementation without jQuery library
  • jQuery Tutorial for Beginners
  •  

    Servlet

     
    Now let’s go on and write the servlet which handles this Ajax call

    package com.servlet;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class JqueryServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    
    protected void doGet(HttpServletRequest request,
    	HttpServletResponse response) throws ServletException, IOException {
    
    	String userName = request.getParameter("userName");
    	if (userName.equals("")) {
    		userName = "User name cannot be empty";
    	} else {
    		userName = "Hello " + userName;
    	}
    	response.setContentType("text/plain");
    	response.getWriter().write(userName);
    }
    }
    

    I hope the code above is self explanatory.
     

    Another must read:

     

    Web.xml

     
    Make sure you have done servlet mapping in web.xml as shown below

    
      JqueryAjaxServlet
      
        index.jsp
      
      
        JqueryServlet
        com.servlet.JqueryServlet
      
      
        JqueryServlet
        /JqueryServlet/*
      
    
    

     

    Demo

     
    AJAX-implementation-in-JSP-and-Servlet-using-JQuery
     
    On running the application the above webpage is generated, in which enter a value in the textbox and click anywhere outside the textbox, then you will see a welcome message saying “Hello (userName)”.

    Note: In our next article I have explained on how to return complex Java objects such as list, map, etc. as response to a ajax call.
     
    download
     

    Reference

     

    Read More

    Setting up jQuery jTable plugin in Struts 2 framework

    Posted by on Apr 19, 2013 in jQuery, jTable, Struts 2 Tutorial, Struts-2 | 42 comments

     
    In this article we will learn to setup jTable and dependent libraries in Struts 2 web application. jTable is a jQuery plugin which is used to create AJAX based CRUD tables without coding HTML or Javascript, to know more about jTable please refer the article here
     

    Steps done to set up our application for jTable

     
    Libraries required for the setup,

     
    Now to start with demonstration of above topic, let us Create a Dynamic Web Project in Eclipse, with following project structure.
     
    jTable in struts 2
     
    As show in the image download the required library mentioned and place it in js and css folder of eclipse work-space, and refer these files in the head section in the jsp as shown below.
     
    Setup done from the browser perspective: jTable
     
    jTable plugin allows you to issue an ajax request via jQuery plugin and expects a JSON object as a response, hence the following configuration needs to be made in Jsp file
     

    Jsp Page

     
    File : jTable.jsp

    
    
    jTable in Struts 2
    
    
    
    
    
    
    
    
    
    
    
    
    

    Integrating jTable jQuery plugin and Struts 2 framework

     
    As you can see, jTable just needs a div container as the only HTML tag. It fields options are explained below:
    title: Title of the table.
    actions: URLs of actions that are used to create/delete/update/list records.
    fields: It defines the field names that represent columns of the record. Note that the field name should exactly match the instance variable defined in the model class.
     
    Setup done from the server’s perspective: Struts 2 Action class
     
    In the Action class, we are populating a list of type “Student”(Model). Since jTable accepts data only in Json format, so we are converting this List (Java Object) to Json(Javascript object Notation) format using struts2-json-plugin.jar.

    **Update:: In the article AJAX implementation in Struts 2 using JQuery and JSON I have explained about usage of struts2-json-plugin.jar clearly, So if you are not aware of how struts2-json-plugin works, then please go thorough the above mentiioned link.

     

    Action Class

     

    package com.simplecodestuffs.action;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import com.opensymphony.xwork2.Action;
    import com.simplecodestuffs.model.Student;
    
    public class JtableAction {
    
    	private List records = new ArrayList();
    	private String result;
    
    	public String list() {
    		// Add data to Student list
    		records.add(new Student(1, "Haripriya", "IT", "xyz@xyz.com"));
    		records.add(new Student(2, "Dinesh", "ECE", "xyz@gmail.com"));
    		records.add(new Student(3, "Prabhu", "MECH", "abc@gmail.com"));
    		records.add(new Student(4, "Badru", "ECE", "efg@gmail.com"));
    		records.add(new Student(5, "Lahir nisha", "CSC", "xyz@gmail.com"));
    		records.add(new Student(6, "Nilafar nisha", "CSC", "123@gmail.com"));
    		records.add(new Student(7, "Jamil", "ECE", "789@gmail.com"));
    		records.add(new Student(8, "Mahes", "ECE", "123@gmail.com"));
    		records.add(new Student(9, "Lourde", "IT", "xyz@gmail.com"));
    		result = "OK";
    
    		return Action.SUCCESS;
    	}
    
    	public List getRecords() {
    		return records;
    	}
    
    	public void setRecords(List records) {
    		this.records = records;
    	}
    
    	public String getResult() {
    		return result;
    	}
    
    	public void setResult(String result) {
    		this.result = result;
    	}
    }
    

     
    In case of read operations in jTable, Result property must be “OK” if operation is successful. If an error occurs, then Result property must be “ERROR”. If Result is “OK”, the Records property will contain an array of records defined in the action class. If it’s ERROR, a Message property will contain an error message to show to the user. A sample return value for listAction is show below
     

    {
    "Result":"OK",
    "Records":
    [{
    "studentId":1,
    "name":"Haripriya",
    "department":"IT",
    "emailId":"xyz@xyz.com"
    }]
    }
    

     

    Model Class

     
    Create the Model class which will have getters and setters for fields specified in jTable script.
     

    package com.simplecodestuffs.model;
    
    public class Student {
    
    	public Student() {
    	}
    
    	public Student(int studentId, String name, String department, String emailId) {
    		super();
    		this.studentId = studentId;
    		this.name = name;
    		this.department = department;
    		this.emailId = emailId;
    	}
    
    	private int studentId;
    	private String name;
    	private String department;
    	private String emailId;
    
    	public int getStudentId() {
    		return studentId;
    	}
    
    	public String getName() {
    		return name;
    	}
    
    	public String getDepartment() {
    		return department;
    	}
    
    	public String getEmailId() {
    		return emailId;
    	}
    
    	public void setStudentId(int studentId) {
    		this.studentId = studentId;
    	}
    
    	public void setName(String name) {
    		this.name = name;
    	}
    
    	public void setDepartment(String department) {
    		this.department = department;
    	}
    
    	public void setEmailId(String emailId) {
    		this.emailId = emailId;
    	}
    }
    

     

    Struts.xml

     

    
    
    
    
       
    	/jTable.jsp
      
      
    	
      
    
    
    

    Since jTable accepts data only in Json format, So in order to convert java object to json object I have extended json-default package instead of struts-default package, please refer article here for more detail on json-default package.
     

    Demo

     
    On running the application i got the following response
     
    Jtable exception
     
    Since I have not handled any exception, so the message displayed in error box is empty.
     
    While debugging the error I found that the json response formed in struts application as below.
    get json result in Jtable
     
    Hear the property names of jTable plugin are case sensitive. Only “Result”, “Records” and “Message” will work. In struts 2 the “json response” generated is in lower case[“result”, “records” and “message”], hence I edited the jtable.js to replace Result to result, Records to records and Message to message then it worked.
     
    **Note: Along with the above keyword replace TotalRecordCount to totalRecordCount respectively, since this parameter will be used to display pagination count(Which I will implement in upcoming tutorial)
     
    jquery-jtable-in-struts-2
     
    Now on including action for create, update and delete in jsp page as below

    actions : {
    	listAction : 'list',
    	createAction : 'create',
    	updateAction : 'update',
    	deleteAction : 'delete'
    }
    

     
    On running the application
    Integrating-jQuery-jTable-plugin-with-Struts2-framework
     
    On clicking ‘Add new record’
    Struts-2-using-jTable-jQuery-plug-in-Create-record
     
    On clicking edit button
    Struts-2-jTable-jQuery-plug-in-Update-record
     
    On clicking delete button
    Struts-2-jTable-jQuery-plug-in-Delete-record
     
    Note :
     
    In the above program I have not included the logic for create, delete and update functions. In the article CRUD Operations in Struts 2 using jTable jQuery plugin via Ajax I have implemented CRUD operation using jTable jQuery plugin in Struts 2, and in the article Pagination in Struts 2 using jQuery jTable plugin I have implemented paging feature using the same plugin.
     
    download
     

    Reference

     
    jTable official website
    AJAX based CRUD tables using ASP.NET MVC 3 and jTable jQuery plug-in
     

    Read More

    Pie Chart using YUI3 jquery chart plugin in Java web application

    Posted by on Jan 20, 2013 in Ajax, J2EE, Java, Servlet | 1 comment

     
    In this article we will learn to create a pie chart in Servlet with YUI3 jquery chart plugin and this demo is as follows
     
    pie chart jquery
     
    YUI3 provides a “charts” module for creating a wide variety of good looking charts, this module can be called using use() method. These charts requires input data to be in JSON format. For more Information on YUI3 chart, read on its official document – http://yuilibrary.com/yui/docs/charts/
     
    Recommended reading
    Create Auto-Refreshing Pie Chart/Bar Chart in Servlet dynamically using JFreeChart
     
    In this example, I am going to retrieve values from a csv file insted of database and display its data in from of pie chart, for this, I am going to use OpenCSV library which simplifies the work of parsing CSV files. Here the Data table will load the data by making an Ajax call.
     
    Note:
    • Refer the article on how to Read / Write CSV file in Java using Opencsv library/ .
     
    Download the csv file from which the data is to be read from here and place it under src folder. This csv files contains 2 columns – Source and Percentage.
     
    Final folder structure is as shown below
     
    YUI3 CHart integration in java web application
     

    Model class

     
    Create a model class that gets and sets the data from the columns of the csv file.
     

    package com.model;
    
    public class AirPollution {
    
    	private String Source;
    	private int Percentage;
    
    	public AirPollution() {
    	}
    
    	public AirPollution(String source, int percentage) {
    		Source = source;
    		Percentage = percentage;
    	}
    
    	public String getSource() {
    		return Source;
    	}
    
    	public int getPercentage() {
    		return Percentage;
    	}
    
    	public void setSource(String source) {
    		Source = source;
    	}
    
    	public void setPercentage(int percentage) {
    		Percentage = percentage;
    	}
    }
    

     

    Business class

     
    Create a Business Service class that would fetch data from the csv file using model class.
     

    BusinessService

     

    
    package com.service;
    
    import java.io.BufferedReader;
    import java.io.IOException;
    import java.io.InputStream;
    import java.io.InputStreamReader;
    import java.util.LinkedList;
    import java.util.List;
    
    import au.com.bytecode.opencsv.CSVReader;
    
    import com.model.AirPollution;
    
    public class BusinessService {
    
    public static List getAirPollutionSource() {
    
    	List airPollutionList = new LinkedList();
    	String fileName = "AirPollution.csv";
    
    	InputStream is = Thread.currentThread().getContextClassLoader()
    			.getResourceAsStream(fileName);
    	BufferedReader br = new BufferedReader(new InputStreamReader(is));
    
    	try {
    		CSVReader reader = new CSVReader(br,',','\"',1);
    		String[] row = null;
    		while ((row = reader.readNext()) != null) 
    		{
    		airPollutionList.add(new AirPollution(row[0], Integer.parseInt(row[1])));
    		}
    		reader.close();
    	} catch (IOException e) {
    		System.err.println(e.getMessage());
    	}
    	return airPollutionList;
    }
    }
    

     
    Also read
    Struts2-Jfreechart integration
     

    Jsp page

    Now create the jsp file to display the data fetched from csv file in form of pie chart.
     

    
    
    
    Pie Chart using YUI3 Charts in Java web application
    
    
    
    
    
    
    

    Pie Chart Demo using YUI3 Charts in Java web application


     

    Controller

     

    package com.controller;
    
    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 com.google.gson.Gson;
    import com.google.gson.GsonBuilder;
    import com.model.AirPollution;
    import com.service.BusinessService;
    
    public class PieChartDemo extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    
    	protected void doGet(HttpServletRequest request,
    			HttpServletResponse response) throws ServletException, IOException {
    
    		response.setContentType("application/json");
    		// Call business service class to get list of Air Pollution Source
    		List airPollutionList = BusinessService.getAirPollutionSource();
    
    		Gson gson = new GsonBuilder().setPrettyPrinting().create();
    		// Convert Java Object to Json
    		String json = gson.toJson(airPollutionList);
    		
    		response.getWriter().print(json);
    	}
    
    	protected void doPost(HttpServletRequest request,
    			HttpServletResponse response) throws ServletException, IOException {
    		doGet(request, response);
    	}
    }
    

     

    Web.xml

     
    Make sure you have done servlet mapping properly in web.xml file as shown below

      
        index.jsp
      
      
        PieChartDemo
        PieChartDemo
        com.controller.PieChartDemo
      
      
        PieChartDemo
        /PieChartDemo
      
    
    

     
    download
     

    Reference

     
    YUI library Official website
     

    Read More

    AJAX File Upload in Java Web Application using jQuery.AjaxFileUpload plugin

    Posted by on Jan 7, 2013 in Ajax, J2EE, jQuery, Servlet | 3 comments

     
    ajax style file upload in servlet and jsp
     
    In my previous article on File Upload Example in Servlet & Jsp we learnt how to upload a file into sever via Apache Commons FileUpload plugin, In this article we shall add ajax style feature to our previous example using jQuery.AjaxFileUpload.js plugin.
     

    Modifications

     
    Before getting into the tutorial, I will let you know the small modification which I made in jQuery Form Plugin.
     
    1. By default this plugin allows only images, this is specified in jQuery.AjaxFileUpload.js as below.

    valid_extensions : ['gif','png','jpg','jpeg']
    

    So inorder to upload file with other extensions, I have modified this to

    valid_extensions : ['gif','png','jpg','jpeg','txt','docx','pdf','mkv']
    

    You can include/remove these extensions according to your requirement
     
    2. When file upload fails this plugin sends two parameter in response, they are
    status : Just has the status code, it is set to false when file upload fails
    message : This holds the error message.

    When file upload is successful, no response is sent back to client. So in order to send an upload success message I have modified the code from

    settings.onComplete.apply(element, [response, settings.params]);

    to

    settings.onComplete.apply(element, [ {
    	status : true,
    	message : 'Your file has been uploaded!'
    }, settings.params ]);
    

    Now let’s go ahead implement ajax file upload functionality in java web application
     

    Library

     

    Folder structure

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

    JSP

     

    
    
    
    Asynchronous file Upload in Java Web Application
    
    
    
    
    
    
    

    AJAX Style File upload in Java Web Application


     
    The required jquery files are referenced in the head section of jsp file. Here whenever a file is selected, the script gets fired and triggers the servlet via action parameter, which holds the servlet url. This servlet in turn handles the file upload logic in the server side.
     
    Another must read:
    jQuery form validation using jQuery Validation plugin

    jQuery Tutorial for Beginners
     

    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 it is 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) 
    		{
    		  e.printStackTrace();
    		}
    	}
    }
    }
    

     

    web.xml

     
    Make sure that the web.xml has following mappings

    
    	UploadFile
    	com.fileupload.UploadFile
    
    
    	UploadFile
    	/UploadFile
    
    
        index.jsp
    
    

     

    Demo

     
    On Running this application
    ajax file upload2
     
    When file upload is successful
    Ajax file upload6
     
    When we try to upload a file whose format is not specified in jQuery.AjaxFileUpload.js file
    Ajax file upload4
     
    I our next article we shall implement ajax file upload functionality with file upload progress bar.
     
    download
     

    Reference

     
    jQuery.AjaxFileUpload.js
     

    Read More