How to display the HTML5 Ajax File Upload progress bar,

How to display the HTML5 Ajax File Upload progress bar,

I originally intended to use the jquery plug-in for asynchronous file upload. For example, uploadfy requires additional support. Some people also use iframe to simulate the asynchronous upload mechanism, which is quite awkward. Because the project does not consider low-version browsers, it is decided to use html5 for implementation. The following is a simple demo. You need to do the specific style yourself.
The backend processes files based on strut2, depending on the project. Only pay attention to setting the file size limit. <Constant name = "struts. multipart. maxSize" value = "52428800"/> This configuration is set according to the actual situation. If it is exceeded, 404 is returned.
The first step is to upload the page, which is relatively simple, with the parameter on the file.

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]);
These two statements bind data to the form. Because html5 supports Multifile upload
Document. getElementById ('filename'). files
Returns an array. There is only one file, so the subscript 0 element is used.
Xhr. upload. addEventListener ("progress", uploadProgress, false );
Xhr. addEventListener ("load", uploadComplete, false );

Xhr. addEventListener ("error", uploadFailed, false );
Xhr. addEventListener ("abort", uploadCanceled, false );
Here, you can bind progress, upload, error, and interrupt events to provide some interaction. The file progress is displayed in the progress callback.
Then paste the background code and 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 = 837481714629791752L; 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 successful! "; 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>
In this way, the basic upload function is implemented.
Thank you for reading this article. I hope this article will help you learn how to implement the Ajax File Upload progress bar.