View Latest Questions and Answers|Ask Questions?|Tutorials

 
 

Home Ajax Ajax File Upload Example



Ajax File Upload Example
Posted on: May 25, 2009 at 12:00 AM
This application illustrates how to upload a file using servlet through the Ajax technology.

Ajax File Upload Example

     

This application illustrates how to upload a file using servlet through the Ajax technology.

In this example you simply create a file Upload application using ajax just follows by these points:

  • Create a simple HTML form for file upload
  • Set the target to an iFrame which is on the actual page but not visible
  • Call a JavaScript function on form submit to call the servlet
  • And the servlet finishes the all upload process.

To understand the way this works I think it is easiest to break it down into parts:

  1. A file upload extention that counts bytes as they are uploaded
  2. An interface that monitors the progress of something running on the server
  3. AJAX to pull the monitoring into the current screen

 

The Entire Application is as follows:

 

 

Source Code of fileUpload.html 

<html>
<head>
<title>Ajax File Upload</title>
<script language="javascript">
var req;

function ajaxFunction(){
  var url = "example/FileUploadServlet";

  if (window.XMLHttpRequest){ 
  req = new XMLHttpRequest();
  req.onreadystatechange = processStateChange;

  try{
  req.open("GET", url, true);
  } catch (e) {
  alert(e);
  }
  req.send(null);
  } else if (window.ActiveXObject) { 
  req = new ActiveXObject("Microsoft.XMLHTTP");
  
  if (req) {
  req.onreadystatechange = processStateChange;
  req.open("GET", url, true);
  req.send();
  }
  }
}

function processStateChange(){
  if (req.readyState == 4){
  if (req.status == 200){
  var xml = req.responseXML;
  var isNotFinished = xml.getElementsByTagName
   ("finished")[0];
  var myBytesRead = xml.getElementsByTagName
   ("bytes_read")[0];
  var myContentLength = xml.getElementsByTagName
   ("content_length")[0];
  var myPercent = xml.getElementsByTagName
  ("percent_complete")[0];
  if ((isNotFinished == null) && (myPercent == null)){
  document.getElementById("initializing").style.
  visibility = "visible";
  window.setTimeout("ajaxFunction();", 100);
  } else {
  document.getElementById("initializing").style.
  visibility = "hidden";
  document.getElementById("progressBarTable").style.
  visibility = "visible";
  document.getElementById("percentCompleteTable").style.
   visibility = "visible";
  document.getElementById("bytesRead").style.
   visibility = "visible";

  myBytesRead = myBytesRead.firstChild.data;
  myContentLength = myContentLength.firstChild.data;

  if (myPercent != null) {
  myPercent = myPercent.firstChild.data;
  
  document.getElementById("progressBar").style.width 
  = myPercent + "%";
  document.getElementById("bytesRead").innerHTML 
   = myBytesRead + " of " + 
  myContentLength + " bytes read";
  document.getElementById("percentComplete").innerHTML 
  = myPercent + "100%";
  window.setTimeout("ajaxFunction();", 100);
  } else {
  document.getElementById("bytesRead").style.visibility 
   = "hidden";
  document.getElementById("progressBar").style.width 
   = "100%";
  document.getElementById("percentComplete").innerHTML 
  = "File Uploading Done!";
  document.getElementById("txtFile").value="";
  }
  }
  } else {
  alert(req.statusText);
  }
  }
}
</script>
</head>
<body>
  <iframe id="uploadFrameID" name="uploadFrame" height="0" width="0" 
  frameborder="0" scrolling="yes"></iframe>  
  <form id="myForm" enctype="multipart/form-data" method="post" 
   target="uploadFrame" 
  action="example/FileUploadServlet" onsubmit="ajaxFunction()">
  <input type="file" name="txtFile" id="txtFile" /><br />
  <input type="submit" id="submitID" name="submit" value=
  "Upload" />
  </form>
  
  <div id="initializing" style="visibility: hidden; position: 
   absolute; top: 100px;">
  <table width="100%" style="border: 1px; background-color: black;">
  <tr>
  <td>
  <table width="100%" style="border: 1px; background-color:
    black; color: white;">
  <tr>
  <td align="center">
  <b>Initializing Upload...</b>
  </td>
  </tr>
  </table>
  </td>
  </tr>
  </table>
  </div>
  
  <div id="progressBarTable" style="visibility: hidden; position: 
  absolute; top: 100px;">
  <table width="100%" style="border: 1px; color: white;">
  <tr>
  <td>
  <table id="progressBar" width="100%" >
  <tr>
  <td>&nbsp;</td>
  </tr>
  </table>
  </td>
  </tr>
  </table>
  <table width="100%" style="background-color: white; color: black;">
  <tr>
  <td align="center" nowrap="nowrap">
  <span id="bytesRead" style="font-weight: bold;">&nbsp;</span>
  </td>
  </tr>
  </table>  
  </div>

  <div id="percentCompleteTable" align="center"
  style="visibility: hidden; position: absolute; top: 100px;">
  <table width="100%" style="border: 1px;">
  <tr>
  <td>
  <table width="100%" style="border: 1px;">
  <tr>
  <td align="center"  width="100%">
 <span id="percentComplete" style="color: blue; 
   font-weight: bold; width:100%">&nbsp;</span>
  </td>
  </tr>
  </table>
  </td>
  </tr>
  </table>
 </div>
</body>
</html>

 

Source Code of FileUploadServlet.java 

package fileupload;

import javax.servlet.Servlet;
import javax.servlet.http.HttpServlet;

import java.io.*;
import java.util.*;
import javax.servlet.http.*;
import org.apache.commons.fileupload.*;
import javax.servlet.ServletException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;


public class FileUploadServlet extends HttpServlet implements Servlet {
  private static final long serialVersionUID = 2740693677625051632L;

  public FileUploadServlet(){
  super();
  }

  protected void doGet(HttpServletRequest request,
   HttpServletResponse response) 
   throws ServletException, IOException {
  PrintWriter out = response.getWriter();
  HttpSession session = request.getSession();
  FileUploadListener listener = null; 
  StringBuffer buffy = new StringBuffer();
  long bytesRead = 0,  contentLength = 0; 

  if (session == null){
  return;
  } else if (session != null){
  listener = (FileUploadListener)session.getAttribute("LISTENER");
  
  if (listener == null){
  return;
  } else {
  bytesRead = listener.getBytesRead();
  contentLength = listener.getContentLength();
  }
  }
  
  response.setContentType("text/xml");
  
  buffy.append("<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n");
  buffy.append("<response>\n");
  buffy.append("\t<bytes_read>" + bytesRead + "</bytes_read>\n");
  buffy.append("\t<content_length>" 
  + contentLength + "</content_length>\n");

  if (bytesRead == contentLength) {
  buffy.append("\t<finished />\n");
  session.setAttribute("LISTENER", null);
  } else {
  long percentComplete = ((100 * bytesRead) / contentLength);  
  buffy.append("\t<percent_complete>" 
   + percentComplete + "</percent_complete>\n");
  }  
  buffy.append("</response>\n");
  out.println(buffy.toString());
  out.flush();
  out.close();
  }
  
  protected void doPost(HttpServletRequest request, 
  HttpServletResponse response) 
   throws ServletException, IOException {
  FileItemFactory factory = new DiskFileItemFactory();
  ServletFileUpload upload = new ServletFileUpload(factory);
  FileUploadListener listener = new FileUploadListener();
  HttpSession session = request.getSession();
  session.setAttribute("LISTENER", listener);
  upload.setProgressListener(listener);
  List uploadedItems = null;
  FileItem fileItem = null;
  String filePath = "c:\\temp";

  try {
  uploadedItems = upload.parseRequest(request);
  Iterator i = uploadedItems.iterator();
  
  while (i.hasNext())  {
  fileItem = (FileItem) i.next();
  if (fileItem.isFormField() == false) {
  if (fileItem.getSize() > 0)  {
  File uploadedFile = null; 
  String myFullFileName = fileItem.getName(), 
   myFileName = "", slashType = 
  (myFullFileName.lastIndexOf("\\") > 0) ? "\\" : "/";
  int startIndex = myFullFileName.lastIndexOf(slashType);
  myFileName = myFullFileName.substring(startIndex 
  + 1, myFullFileName.length());
  uploadedFile = new File(filePath, myFileName);
  fileItem.write(uploadedFile);
  }
  }
  }
  } catch (FileUploadException e) {
  e.printStackTrace();
  } catch (Exception e) {
  e.printStackTrace();
  } 
  } 
}

 

Source Code of FileUploadListener.java 

package fileupload;

import org.apache.commons.fileupload.ProgressListener;

public class FileUploadListener implements ProgressListener{
  private volatile long bytesRead = 0L, 
  contentLength = 0L, item = 0L;

  public FileUploadListener() {
  super();
  }

  public void update(long aBytesRead, 
   long aContentLength, int anItem) {
  bytesRead = aBytesRead;
  contentLength = aContentLength;
  item = anItem;
  }

  public long getBytesRead() {
  return bytesRead;
  }

  public long getContentLength() {
  return contentLength;
  }

  public long getItem() {
  return item;
  }
}

 

Download Complete Source Code

Related Tags for Ajax File Upload Example:
c,  ajax,  file,  application,  upload,  io,  load,  using,  int,  this,  app,  create,  poi,  example,  point,  exam,  ws,  e,  il,  ax,  li,  im,  in,  points,  m,  nt,  ca,  j,  ad,  es,  pp,  cat,  xa,  xamp,  s,  at,  ply,  is,  ll,  mpl,  follow,  ea,  sim,  s,  s,  th,  st,  ati,  ap,  ica,  ica,  ple,  pl,  on,  ol,  o

«Previous Index Next»

More Tutorials from this section

Ask Questions?    Discuss: Ajax File Upload Example   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics
 

 

 

Services

Home Privacy Policy
© All Rights are Reserved for Rose India