HTML5 Ajax File Upload progress bar How to display _ajax related

Originally intended to use the jquery plug-ins for asynchronous file upload, such as uploadfy but need additional support, but also some people with an IFRAME imitate asynchronous upload mechanism, feel more awkward. Because the project does not consider the lower version of the browser, it is decided to implement with HTML5. The following is just a simple demo, the specific style needs to do their own.
Background based on STRUT2 for file processing, depending on the project.  Just be aware of setting the file size limit. <constant name= "struts.multipart.maxSize" value= "52428800"/> This configuration is based on specific circumstances, more than this value will be reported 404.
The first is the upload page, relatively simple, with the file on this parameter.

upload.jsp

<% @page language= "java" pageencoding= "UTF-8" contenttype= "text/html"; 
Charset=utf-8 "%> <% String Path = Request.getcontextpath (); %> <! DOCTYPE html>  

Fd.append ("Name", document.getElementById (' name '). value);
Fd.append ("filename", document.getElementById (' filename '). Files[0]);
the two sentences are to bind the data to the form. Because HTML5 supports multiple file uploads,
document.getElementById (' FileName '). Files
the array is returned. There's only one file, so remove the element labeled 0.

Xhr.upload.addEventListener ("Progress", uploadprogress, false);

Xhr.addeventlistener ("Load", Uploadcomplete, false);

Xhr.addeventlistener ("Error", uploadfailed, false);

Xhr.addeventlistener ("Abort", uploadcanceled, false);
This binds progress, uploads, errors, interrupted events, and provides some interaction. The file progress display is displayed in the progress callback.
Then post the background code and the action configuration, Uploadifytestaction.java

Package com.bjhit.eranges.actions.test;

Import Java.io.File;

Import Com.opensymphony.xwork2.ActionSupport;

public class Uploadifytestaction extends Actionsupport {
 private static final long Serialversionuid = 837481714629791 752L;
 Private File fileName;
 private String name;
 Private String Responseinfo;

 Public String Doupload () throws Exception {
 System.out.println (name);
 File myFile = fileName;
 System.out.println (Myfile.getname ());
 Responseinfo = "Upload success!";
 return "Doupload";
 }

 Public String GetName () {return
 name;
 }

 public void SetName (String name) {
 this.name = name;
 }

 Public File GetFileName () {return
 fileName;
 }

 public void Setfilename (File fileName) {
 this.filename = fileName;
 }

 Public String Getresponseinfo () {return
 responseinfo;
 }

 public void Setresponseinfo (String responseinfo) {
 this.responseinfo = responseinfo;
 }
}

Action Configuration

<!--File Upload example-->
<action name= "uploadifytest_*" class= " Com.bjhit.eranges.actions.test.UploadifyTestAction "method=" {1} ">
 <result name=" doupload "type=" JSON " >
 <param name= "includeproperties" >responseInfo</param>
 <param name= " Excludenullproperties ">true</param>
 </result>
</action>

So the basic upload function is realized.

Thank you for your reading, I hope this article will help you learn Ajax way File Upload progress bar implementation method.